Discussion :

[dj DMSR]

Prototype: Actualiser le gestionnaire d'événement qui observe $$('li.classMaListe').each apres une actualisation ajax de ma liste.

Bonjour

Je m'inspire du Widget Browser d'Apple pour cet exemple:
J'ai deux listes, dans deux div: dans le premier une liste de catégories (category.php); dans le second la liste des noms des items d'une catégorie (selection.php?category=all tous par default).
Via Ajax un click sur une catégorie, actualise la liste des items; un click sur un nom d'item affiche un widget dans un troisième div.

HTML:

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
18
19
20
21
22
 
        <h3>Widget Browser</h3>
        <ul>
          <li class="category">
            <h4>Category</h4>
            <div id="category">
            <?php include(category.php) ?>
            </div>
          </li>
          <li class="name">
            <h4>Name</h4>
            <div id="widgetsname">
            <?php include(selection.php?category=All) ?>
            </div>
          </li>
          <li class="widget">
            <h4>Widget</h4>
            <div id="widget" align="center">
            <?php include('default.html') ?>
            </div>
          </li>
        </ul>

Résultat de category.php

Code :

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

1
2
3
4
5
6
7
8
 
<ul>
	<li class="widgetcategory">All</li>
	<li class="widgetcategory">cat1</li>
	<li class="widgetcategory">cat2</li>
	...
	<li class="widgetcategory">Catn</li>
</ul>

Résultat de selection.php

Code :

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

1
2
3
4
5
6
7
 
 <ul>
	<li class="widgetname">Widget1</li>
	<li class="widgetname">Widget2</li>
	...
	<li class="widgetname">Widgetn</li>
</ul>

Les actualisations Ajax/Prototype:

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
18
19
20
21
22
23
24
25
26
27
 
 Event.observe(window, 'load', init, false);
 
	//note: j'ai d'autres fonctions ici
 
	$$('li.widgetcategory').each(function(clickcategory)
	{
		clickcategory.observe('click', function()
		{
			new Ajax.Updater(widgetsname, 'selection.php', {
				method: 'GET',
				parameters: {
					category: escape(this.innerHTML)
				}
			});
		});
	});
	$$('li.widgetname').each(function(clickname)
	{
		clickname.observe('click', function()
		{
			q=this.innerHTML.replace(/ /g,"_");
			q=q.toLowerCase();
			new Ajax.Updater(widget, 'widgets/'+q+'.html')
		});
	});
}

L'avantage d'utiliser $$('li.classMaListe').each est qu'il n'est point besoin d'écrire une requête ajax pour chaque cas (catégories et items).

Au chargement de la page, tout va bien: par défaut tous les items sont affichés et chaque appel affiche bien le widget voulu dans le troisième div.

Par contre quand on click une catégorie, la liste de ses items est bien actualisée mais les clicks sur ces items ne fonctionnent plus.
Il faudrait actualiser le gestionnaire d'événement de prototype à la fin du chargement d'une catégorie. Bien que par défaut tous les items soient pris en compte dans le gestionnaire, affiner la liste des items (un click sur une catégorie réduit le nombre d'item à ceux de la catégorie) semble annuler le gestionnaire d'événement pour la liste des items.
Comment l'actualiser?

J'ai deux questions subsidiaires à propos du widget affiché dans le troisième div:
1/ s'il contient du javascript comment l'exécuter?
2/ quand il contient une iframe, le premier iframe affiché sera également affiché lorsqu'un second widget contenant également un iframe sera appelé. Comment gérer les iframes avec ajax/prototype?

Merci beaucoup.

[dj DMSR]

Il existe une solution trouvée ici, mais le code js est dans le fichier php qui est appelé avec Ajax et est exécuté grâce à l'option evalScripts: true.
Je préférerais séparer complètement html/css/js, et avoir un code js qui actualise les événements à l'appel de la fonction ajax, avez-vous une autre solution ?