[Prototype] Boutons paramétrés

marcha · 24/04/2007, 16h44

Bonjour,

J'ai une série de boutons dans une application. Ceux-ci servent à lancer
des requêtes Ajax quand on clique dessus en y passant des paramètres.

Traditionnellement je coderai ça ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<img class='bouton' onclick='fonction_commune('paramètres_url_encodé');' />
 
function fonction_commune(params) {
  new Ajax.Updater(un_element, 'page.php?' + params);
}

Mais j'aime pas trop l'idée de mélanger le javascript dans le html. Alors
j'ai envisagé ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$$('.boutons').each( function(e) {
  Event.observe(e, 'click', fonction_commune);
}
function fonction_commune(event) {
  var bouton = Event.element(event);
  var params = bouton.getAttribute(...);
  new Ajax.Updater(un_element, 'page.php?' + params);
}

Avec cette approche (que je souhaite moins obstrusive) je ne sais pas où je dois coder les arguments que j'ai besoin pour mes boutons. J'ai pensé à les
générer dans un attribut quelconque, mais ça me semble pas propre non-plus.

des suggestions ?

LEK · 24/04/2007, 17h13

L'approche initiale m'avais l'air pas si mal.
Maintenant tu peux aussi bien te créer un tableau à deux dimension
avec en dimension 1 l'id du bouton et en dimension 2
les paramètres que ta fonction requiert, non?

sacroyant · 24/04/2007, 17h28

Tu peux faire comme ci- dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 function AddEvent(img){
    var bouton=document.getElementById(img);
   if (bouton.attachEvent){
        bouton.attachEvent("onclick", fonction_commune);
    }
    else if (bouton.addEventListener){
        bouton.addEventListener("click", fonction_commune, false );
    }
}
 
function fonction_commune() {
  new Ajax.Updater(un_element, 'page.php?' + params);
}

Et entre <BODY></BODY> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<img class="bouton" id="Something" src="image.gif"/>
 
<script type="text/javascript">
AddEvent("Something");
</script>

marcha · 24/04/2007, 17h49

Citation:

Envoyé par LEK

L'approche initiale m'avais l'air pas si mal.
Maintenant tu peux aussi bien te créer un tableau à deux dimension
avec en dimension 1 l'id du bouton et en dimension 2
les paramètres que ta fonction requiert, non?

Oui, c'est une bonne idée. Mais elle implique d'ajouter des ids uniques pour
les boutons (ce qui n'est pas pratique dans mon cas, mais faisable)

Petite remarque pour sacroyant: le code que tu as écrit est existant
dans prototype, voir Event.observe. Et tu ne résouts pas mon problème,
la variable params n'a pas de valeur

Je reste ouvert à d'autres propositions

24/04/2007, 17h13	#2
LEK Membre éclairé Inscription : mai 2005 Messages : 596 Détails du profil Informations forums : Inscription : mai 2005 Messages : 596 Points : 363 Points : 363	L'approche initiale m'avais l'air pas si mal. Maintenant tu peux aussi bien te créer un tableau à deux dimension avec en dimension 1 l'id du bouton et en dimension 2 les paramètres que ta fonction requiert, non?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email