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

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

Boutons paramétrés

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager