Actualiser le gestionnaire d'événement
Prototype: Actualiser le gestionnaire d'événement qui observe $$('li.classMaListe').each apres une actualisation ajax de ma liste.
:salut:
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:
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:
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:
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:
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?
:roll:
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.
;)
