Placer un observateur sur plusieurs éléments

Bonjour,

Voilà que j'ai encore un problème… Cette fois-ci j'ai une page avec les miniatures d'un album photo. Ce que je veux faire fonctionnait avec les habituelles "onClick" dans la balise, mais là je patauge.

J'ai donc plusieurs thumbs, possédants tous la classe "thumbs", et une id. J'aimerais qie chacun d'eux soient cliquables et ouvre un apercu, le tout avec une requête Ajax fournissant le titre, la description, la date, etc.

Pour l'instant je ne parvient même pas à retrouver mon apercu. Voici le code en l'état, avec une alert pour tester :
- Je place un premier observateur pour lancer le tout une fois la place en page (les images étant inséré via une requête AJAX, ça avait l'air de bloquer)
- je récupère (enfin, je pense) mes objets img via leur class CSS
- je fait boucle avec chaque image en récupérant leur id
- je passe l'idée en argument du second observateur qui lance une alerte quelconque

Code:

---

1 2 3 4 5 6 7 8 9 10

Event.observe(window, 'load', function(){ var images = $$('div.apercu_image'); images.each(function(item) { var id = identify(item); Event.observe(id, 'click', function(event){ alert('Hello'); }); }); });

---

Merci d'avance pour vos suggestions ! :)

Salut,

Tu sembles bien parti, mais je ne comprends pas bien où tu bloques :
Ton message d'alert se fait bien ?

Citation:

---

Envoyé par gwyohm

Salut,

Tu sembles bien parti, mais je ne comprends pas bien où tu bloques :
Ton message d'alert se fait bien ?

---

Non, c'ets ça le problème… J'ai testé sans faire de boucle et un mettant l'id de la bannière, et là ça marche…


pour donner la structure du HTML structure

Code:

---

1 2 3 4 5 6

<div id="browser"> <div onclick="return openDir('../../_IMG/albums/lieux/')" class="dossier">Retour</div> <div id="" class="apercu_photos"><img src="../../_IMG/albums/lieux/yunlin/thumbs/yunlin-1.jpg" class="thumbs vertical"/></div> <div id="" class="apercu_photos"><img src="../../_IMG/albums/lieux/yunlin/thumbs/yunlin-10.jpg" class="thumbs horizontal"/></div> ... </div>

---

J'ai aussi corrigé le JS, mais ça ne change strictement rien, j'ai beau cliquer, niete ! :(

Code:

---

1 2 3 4 5 6 7 8 9

Event.observe(window, 'load', function(){ var images = $$('.thumbs'); images.each(function(item) { var id = identify(item); Event.observe(id, 'click', function(event){ alert('Hello World'); }); }); });

---

Sur la bannière ça marche avec le code suivant, donc je doit rater un truc sur la boucle imo :

Code:

---

1 2 3 4 5

Event.observe(window, 'load', function(){ Event.observe('banner', 'click', function(event){ alert('Hello World'); }); });

---

le contenu du div browser est obtenu par une requete AJAX ?

Citation:

---

Envoyé par gwyohm

le contenu du div browser est obtenu par une requete AJAX ?

---

Yes si, je la met d'ailleurs en fin de post au cas où (je vais reécrire mes paramètres comme suggerés d'ailleurs)… C'est pour ça que je place un premier event qui attends que la page soit charger, mais est-ce que ça prend en compte les requêtes AJAX ??

Je vais essayer de lier les deux en lancant la function qui place mes observateurs une fois la requête achevée ;)

Citation:

---

function openDir(path)
{
var divBrowser = $('browser');
var divInfo = $('info');

var url = '_AJAX/openUp.php';
var params = 'path='+path;

var myAjax = new Ajax.Updater('browser', url, {method: 'post', parameters: params});
}

---

Bon, j'ai accouplé les deux pour pouvoir être sûr que les img sont présentes aux moments de placer les observateurs, mais j'ai l'erreur suivante : "element.attachEvent is not a function" en me renvoyant à la ligne 4016 de prototype.js, qui est :

Code:

---

1 2 3 4 5

4013 if (element.addEventListener) { 4014 element.addEventListener(name, wrapper, false); 4015 } else { 4016 element.attachEvent("on" + name, wrapper); 4017 }

---

J'ai posé un arrêt sur mon script, et ça semble fonctionner même après la boucle, puisque l'argument item est égal à "img.thumbs nom_image.jpg" et l'argument id est égal à "0", qui est bien l'id de l'image…

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function openDir(path) { var url = '_AJAX/openUp.php'; var params = 'path='+path;   var myAjax = new Ajax.Request(url, {method: 'post', parameters: params, onSuccess: function(transport) { var response = transport.responseText; var divBrowser = $('browser'); var divInfo = $('info');   divBrowser.innerHTML = response;   var images = $$('.thumbs'); images.each(function(item, id) { Event.observe(id, 'click', function(event) { alert('Hello World'); }); }); }}); }

---

Citation:

---

Yes si, je la met d'ailleurs en fin de post au cas où (je vais reécrire mes paramètres comme suggerés d'ailleurs)… C'est pour ça que je place un premier event qui attends que la page soit charger, mais est-ce que ça prend en compte les requêtes AJAX ??

---

Non justement !

Pour te simplifier la vie, je te recommande de passer par le Ajax.Updater : tu lui donne l'élément à mettre à jour, et il se débrouille tout seul

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function openDir(path) { var url = '_AJAX/openUp.php'; var params = {path : path}; // Attention à comment tu passes tes paramètres new Ajax.Updater("divBrowser", url, { parameters: params, onSuccess: function() { // Y'a des fonctions qui raccourcissent bien le code : exemple $('divBrowser').select(".thumbs").invoke("observe", "click", function(e) { alert("hello"); }); } }); }

---

Citation:

---

Envoyé par Shirraz

J'ai posé un arrêt sur mon script, et ça semble fonctionner même après la boucle, puisque l'argument item est égal à "img.thumbs nom_image.jpg" et l'argument id est égal à "0", qui est bien l'id de l'image…

---

Attention id dans ton cas représente l'index de ton itération

Citation:

---

Envoyé par gwyohm

Attention id dans ton cas représente l'index de ton itération

---

Ben l'idée c'est de placer un id sur chaque image dans le script PHP appelé via AJAX. Donc l'index de l'itération correspond à l'id de l'image (et correspond également dans le fichier XML utilisé comme BDD). Comment utiliser la valeur de l'index et l'utiliser donc ?

Citation:

---

Envoyé par Shirraz

Ben l'idée c'est de placer un id sur chaque image dans le script PHP appelé via AJAX. Donc l'index de l'itération correspond à l'id de l'image (et correspond également dans le fichier XML utilisé comme BDD). Comment utiliser la valeur de l'index et l'utiliser donc ?

---

Aucun problème, j'ai juste fait la remarque pour ne pas avoir de confusion... D'un autre coté, tu récupères les images avec le

Code:

---

var images = $$('.thumbs');

---

Tu n'as pas besoin de leur ID pour attacher un événement dessus (peut être que tu en as besoin après, mais pas pour attacher l'événement :

Code:

---

1 2 3 4

images.each( function(item) { // ici item est un Element image tu peux donc faire Event.observe(item, "click", function(e){alert("hello");}); } );

---

Citation:

---

Envoyé par gwyohm

Aucun problème, j'ai juste fait la remarque pour ne pas avoir de confusion... D'un autre coté, tu récupères les images avec le

---

Ok ça fonctionne, merci beaucoup !



Question subsidiaire : qu'est-ce que ce "e" en argument de la fonction ?? J'ai encore un peu de mal à comprendre le coups des valeurs "inventés" qu'on passe aux fonctions (comme "transport" dans une requête qui n'est pas défini avant :s ).

C'est ton événement à la sauce prototype.
Quand tu observe un événement, on te donne une signature de fonction à implémenter. Il se trouve que quand ta fonction est appelée, on lui passe un objet Evenement.
L'avantage, c'est que c'est prototype qui se charge de te le renvoyer (c'est lui qui teste IE ou un autre...), il te permet d'avoir des infos spécifiques plus facilement.
Exemple dans ton cas :

Code:

---

1 2 3 4

e.element(); // te renvoie l'élément à l'origine de l'événement (l'image dans ton cas) e.pointerX(); // l'abscisse du click e.pointery(); // l'ordonnée du click

---

Tu as aussi une autre méthode bien utile : stop. Quand tu attaches un listener sur un click sur un lien ou un bouton (submit par exemple), ca arrete la propagation de l'evenement :

Code:

---

1 2 3 4 5 6 7 8 9

<a id="monLien" href="/une/url">mon lien</a> <script type="text/javascript"> $("monLien").observe("click", function(e) { e.stop(); // si tu ne met pas cette ligne, le lien sera executé donc tu vas naviguer vers /une/url. // si tu le mets, la propagation de l'événement s'arrête là // ... code spécifique }); </script>

---

Citation:

---

Envoyé par gwyohm

C'est ton événement à la sauce prototype.
Quand tu observe un événement, on te donne une signature de fonction à implémenter. Il se trouve que quand ta fonction est appelée, on lui passe un objet Evenement.
L'avantage, c'est que c'est prototype qui se charge de te le renvoyer (c'est lui qui teste IE ou un autre...), il te permet d'avoir des infos spécifiques plus facilement.
Exemple dans ton cas :

Code:

---

1 2 3 4

e.element(); // te renvoie l'élément à l'origine de l'événement (l'image dans ton cas) e.pointerX(); // l'abscisse du click e.pointery(); // l'ordonnée du click

---

Tu as aussi une autre méthode bien utile : stop. Quand tu attaches un listener sur un click sur un lien ou un bouton (submit par exemple), ca arrete la propagation de l'evenement :

Code:

---

1 2 3 4 5 6 7 8 9

<a id="monLien" href="/une/url">mon lien</a> <script type="text/javascript"> $("monLien").observe("click", function(e) { e.stop(); // si tu ne met pas cette ligne, le lien sera executé donc tu vas naviguer vers /une/url. // si tu le mets, la propagation de l'événement s'arrête là // ... code spécifique }); </script>

---

---

Si j'ai à peu près compris, Protoype crée l'argument de toutes manière, j'ai juste à rentrer un nom pour le retrouver l'argument, qui peut-être "e" ou "truc-machin" ou "patatra" ?

C'est assez bizarre pour un débutant en Prototype de passer un argument "qui n'existe pas encore" :s


Encore merci !

Oui, c'est exactement ça ; tu peux l'appeler jambon si ça te fais plaisir.

C'est bizarre ; non, c'est un contrat un peu comme quand tu implémentes une interface; tu ne maîtrises pas l'appel à ta fonction (c'est prototype qui s'en charge), mais tu maîtrises le corps de ta fonction.

Comme tu ne maîtrises pas l'appel, on t'envoie dans la limite de la généricité tout ce dont tu peux avoir besoin. Et là il se trouve que c'est un objet Event. Si tu n'en as pas besoin, tu n'es pas obliger de le déclarer dans ta fonction, javascript permet d'invoquer une méthode avec des arguments non déclarés.

Citation:

---

Envoyé par gwyohm

Oui, c'est exactement ça ; tu peux l'appeler jambon si ça te fais plaisir.

C'est bizarre ; non, c'est un contrat un peu comme quand tu implémentes une interface; tu ne maîtrises pas l'appel à ta fonction (c'est prototype qui s'en charge), mais tu maîtrises le corps de ta fonction.

Comme tu ne maîtrises pas l'appel, on t'envoie dans la limite de la généricité tout ce dont tu peux avoir besoin. Et là il se trouve que c'est un objet Event. Si tu n'en as pas besoin, tu n'es pas obliger de le déclarer dans ta fonction, javascript permet d'invoquer une méthode avec des arguments non déclarés.

---

C'est bizarre pour un débutant en Prototype qui a l'habitude de toujours passer ses arguments à l'appel de la fonction ;)

merci beaucoup pour ces lumières ;)