[Prototype] Réaffecter un Event.observe

Réaffecter un Event.observe

Bonjour,

Je suis en train de découvrir Prototype et Scriptaculous, mais je bloque sur un petit point (de détail j'espère).

Je cherche à faire un tableau de scores, que l'utilisateur remplis en faisant glisser les valeurs sur les cases (exemple). Jusque là, pas de problème. A chaque fois que l'utilisateur ajoute une valeur, elle est enregistrée dans la base de données. Ce traitement se fait en AJAX, et fonctionne également.

La fonction AJAX retourne le code HTML du tableau, que je réinjecte dans la page, à la place du code de l'ancien tableau. A partir de là, les cellules n'interceptent plus les évènement. Et même si je relance un Event.observe(window, 'load', fonction, false), rien ne se passe.

Ci dessous quelques fragments du code JS

Code:

1
2
3
4
5
6
7
8
9
10
function glisser0() {
	new Draggable('point_0', {revert: true});
}
function glisser05() {
	new Draggable('point_05', {revert: true});
}
function glisser1() {
	new Draggable('point_1', {revert: true});
}
...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function preparerCellules() {
 
	var classes = new Array('2_1', '2_2', '2_3', '2_4', '2_5',
		'2_6', '2_7', '2_8', '2_9', 'prof');
 
	for (var i=0; i<classes.length; i++) {
		Droppables.add('h09_'+classes[i], {
			accept: 'points',
			onDrop: function(classe, cellule) {
				test(9, classe.id, cellule.id);
			}
		});
		Droppables.add('h10_'+classes[i], {
			accept: 'points', overclass: 'active2',
			onDrop: function(classe, cellule) {
				test(10, classe.id, cellule.id);
			}
		});
		...
	}
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
Event.observe(window, 'load', glisser0, false);
Event.observe(window, 'load', glisser05, false);
Event.observe(window, 'load', glisser1, false);
Event.observe(window, 'load', glisser15, false);
Event.observe(window, 'load', glisser2, false);
Event.observe(window, 'load', glisser25, false);
Event.observe(window, 'load', glisser3, false);
Event.observe(window, 'load', glisser35, false);
Event.observe(window, 'load', glisser4, false);
Event.observe(window, 'load', glisser45, false);
Event.observe(window, 'load', glisser5, false);
Event.observe(window, 'load', preparerCellules, false);

Code:

1
2
3
4
5
6
7
8
9
10
function ajouterPoint(heure, point, equipe) {
 
	var demande = 'heure='+heure+'&point='+point+'&equipe='+equipe;
	var url = 'action/score_ajouterPoint.action.php';
 
	requete.open("POST", url, true);
	requete.onreadystatechange = callbackAjouterPoint;
	requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	requete.send(demande);	
}

Code:

1
2
3
4
5
6
7
8
9
10
11
function callbackAjouterPoint() {
 
	if (requete.readyState == 4) {
		if (requete.status == 200) {
 
			document.getElementById('principal').innerHTML = requete.responseText;
			Event.observe(window, 'load', preparerCellules, false);
		}
	}
 
}

L'évènement load est lancé une seule fois, au chargement de la page. Donc tu ne peux plus le réappeler dans callbackAjouterPoint() puisque la page est déja chargée.

Appelle directement toutes tes méthodes à la place de Event.observe(window, 'load', preparerCellules, false), ca devrait marcher

Merci, c'est exactement ça ...

J'ai une seconde question, découlant de la première. Au fur et à mesure, le glissement devient de plus en plus saccadé, comme si la page devenait lourde. Est-ce que ça viendrait d'une surcharge d'évènement. Si oui, peut-on en supprimer ?

T'as la méthode destroy qui s'applique à un draggable pour détruire l'instance.

Tu peux par exemple faire un truc dans ce genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var arrayDraggables = new Array();
 
function glisser0() {
	arrayDraggables.push(new Draggable('point_0', {revert: true}));
}
function glisser05() {
	arrayDraggables.push(new Draggable('point_05', {revert: true}));
}
function glisser1() {
	arrayDraggables.push(new Draggable('point_1', {revert: true}));
}
...

Et tu les supprimes tous juste avant de recréer ta div:

Code:

1
2
3
4
for (var v=arrayDraggables.length-1; v>0;v--){
   arrayDraggables[v].destroy();
   arrayDraggables.pop();
}