Discussion :

[beegees]

Bonjour tout le monde,

J'ai un tableau qui contient certaines cellules (td) elles-mêmes contenant des cases à cocher.

Chaque case à cocher a un ID unique généré en PHP.

J'ai par exemple ceci :

Code :

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

1
2
 
<td id="ID" align="center"><input id="cb_ID" type="checkbox"> </td><td id="Nom" align="center"><input id="cb_Nom" type="checkbox"> </td>

Je voudrais associer à ces checkboxes un évènement, j'ai donc ceci :

Code :

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

Event.observe(cb_id, 'click', afficher_Tableau, false);

Dois-je faire une ligne par checkbox où est-il possible de rendre ce code générique ?

Par exemple, en cliquant sur la case à cocher, j'obtiendrais l'ID ?

J'ai essayé this.id :

Code :

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

1
2
 
Event.observe(this.id, 'click', cacher_colonne, false);

Code :

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

1
2
3
4
function cacher_colonne(id)
	{
		alert(id);
	}

mais j'obtiens cette erreur :

element is undefined

Autre chose :

Puis-je mettre autant de fois que j'en ai besoin cette ligne :

Code :

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

Event.observe(cb_id, 'click', afficher_Tableau, false);

Exemple :

Code :

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

1
2
3
 
Event.observe(window, 'load', afficher_Tableau, false);
Event.observe(cb_id, 'click', afficher_Tableau, false);

Merci d'avance pour l'aide.

beegees

[gwyohm]

J'ai un tableau qui contient certaines cellules (td) elles-mêmes contenant des cases à cocher.

Chaque case à cocher a un ID unique généré en PHP.
...

Dois-je faire une ligne par checkbox où est-il possible de rendre ce code générique ?

Oui, tu peux rendre ton code générique :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
// Comme toutes tes checkbox sont dans des td, 
// tu peux faire un selecteur de ce genre :
var checkboxArray = $$("td input[type=checkbox]");
// Tu peux aussi leur donner une classe css commune 
// (qui ne fait rien) par exemple cbEventHideCol et faire
var checkboxArray = $$(".cbEventHideCol");
 
// ensuite à chacune tu veux associer le même listener. 
// Tu peux faire ça avec un itérateur :
 
checkboxArray.each(function(cb) {
  Event.observe(cb, 'click', cacher_colonne);
});
 
// mais comme Element défini observe, tu peux aussi faire :
checkboxArray.invoke("observe", "click", cacher_colonne);

Par exemple, en cliquant sur la case à cocher, j'obtiendrais l'ID ?

Non, pas directement : tu vas être dans une méthode qui va prendre un parametre evenement :

Code :

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

1
2
3
4
5
6
7
 
function cacher_colonne(e) {
  // on recupere la checkbox
  var cbSource = e.element();
  // on utilise la méthode de Element qui renvoie l'ID
  alert(cbSource.identify());
}

Plutôt que de récupérer l'élément source via l'événement, il est possible de faire autrement, mais je pense qu'il faut passer par un itérateur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
checkboxArray.each(function(cb) {
  // le truc c'est d'utiliser bindAsEventListener sur le handler. 
  // Ceci a pour effet de copier la méthode dans l'objet passé en parametre
  cb.observe('click', cacher_colonne.bindAsEventListener(cb));
});
 
 
// Du coup, dans ta fonction cacher_colonne, 
// et dans le cas d'un appel par l'événement,
// this est la checkbox cliquée :
function cacher_colonne(e) {
  alert(this.identify());
}

Puis-je mettre autant de fois que j'en ai besoin cette ligne :
Exemple :

Code :

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

1
2
Event.observe(window, 'load', afficher_Tableau, false);
Event.observe(cb_id, 'click', afficher_Tableau, false);

Oui, tu peux sur un même objet appeler plusieurs fois la méthode observe, et attacher le même observateur d'événement sur différents objets pour peu que le handler gère les différents cas

NB : Je ne sais pas quelle version de prototype tu utilises, mais depuis la version 1.6, le paramètre useCapture (le false dans ton code) n'est plus utilisé car ne fonctionnait pas sous IE http://prototypejs.org/api/event/observe

[beegees]

Woaw, Salut gwyohm,

Merci pour ta superbe réponse.

Je vais analyser tout cela et essayer d'appliquer ce que tu me dis.

Vraiment, c'est très sympa, réponse très complète.

La version 1.6 n'est pas beta ? on peut l'utiliser sans problème ?

++ et merci encore.

beegees

[gwyohm]

La 1.6.1 est en RC3, mais la 1.6 est sortie