Discussion :

[Cladjidane]

Bonjour,

Je viens chercher un peu d'aide par ici, car je m'en sors difficilement depuis ce matin avec un problème de gestion d'événements.

J'ai un gestionnaire d'évenements en place qui surveille les clicks sur tous les éléments possédant une class css 'e'. Mais lorsque je regenère les élements par Xhr (Ajax.Request de 'prototype' en l'occurence) le gestionnaire ne fonctionne plus. Voici un détail de ma procédure.

J'ai créé un objet de cette manière :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 // Creation de la class(objet) menu
var oEdit = Class.create();
oEdit.prototype = {
 
  initialize: function() { 	
		$('contenu').getElementsByClassName('e').each( function(n) {
			Event.observe(n, 'click', this.edit.bindAsEventListener(this));	
		}.bind(this));	
	},
 
edit: function........
 
}

dans cette objet(ou class si vous préferez) j'ai une fonction pour un traitement en XHR comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
new Ajax.Request('/proxy.php', {
 
        method: 'get',
        parameters: pars,
        onSuccess: function(requester) {
            $('contenu').innerHTML = requester.responseText;
            // J'ai tenté ici de relancer Event.Observe sur mes éléments 'e', sans succès
        }			
});

Le problème c'est qu'une fois le traitement AJAX effectué, Event.Observe ne fonctionne plus. C'est manifestement dû au fait que je regenère les éléments observés.

Je vais pas approfondire pour le moment mais si une âme généreuse veux bien m'aider à démeler mon sac de noeud, merci d'avance

Fab

[Cladjidane]

Auto réponse (enfin une solution parmis d'autres j'imagine)

Il suffit d'insérer un bout de code js, dans le fichier ciblé par la requete xhr, et bien penser à interpreter le js avec un eval, sinon ça ne marchera pas.

Comme ceci :

Code :

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

1
2
3
4
5
6
7
 
		new Ajax.Updater('contenu', '/proxy.php', {
			asynchronous: true,
			method: "get",
			evalScripts: true,// La partie importante
			parameters: pars
		});

Pour le fichier proxy.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$sortie .= '
<script type="text/javascript">
 
	var editBis = new oEdit();
 
	$(\'contenu\').getElementsByClassName(\'e\').each( function(n) {	
		Event.observe(n, \'click\', function() {editBis.edit.bindAsEventListener(editBis);});	
	}.bind(this));		
</script>';
 
echo $sortie;

Si quelqu'un à une meilleur solution uniquement coté Js je suis preneur

Fab