Placer un observateur sur plusieurs éléments

**Shirraz** · 04/04/2009, 21h04

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 javascript :

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

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 !

**gwyohm** · 04/04/2009, 23h55

Salut,

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

**Shirraz** · 05/04/2009, 12h26

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 :

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

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 :

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

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 :

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

1
2
3
4
5
Event.observe(window, 'load', function(){	
	Event.observe('banner', 'click', function(event){
		alert('Hello World');
		});
	});

**gwyohm** · 05/04/2009, 12h34

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

**Shirraz** · 05/04/2009, 13h00

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

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});
}

**Shirraz** · 05/04/2009, 13h29

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 :

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

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 :

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
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');
				});
			});	
		}});
	}

**gwyohm** · 05/04/2009, 13h55

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 :

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

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");
});
            }
       });
}

**gwyohm** · 05/04/2009, 13h57

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

**Shirraz** · 05/04/2009, 14h05

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 ?

**gwyohm** · 05/04/2009, 14h12

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 :

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

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 :

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

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");});
} );

**Shirraz** · 05/04/2009, 20h20

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 ).

**gwyohm** · 06/04/2009, 11h03

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 :

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

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 :

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

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>

**Shirraz** · 06/04/2009, 12h39

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 :

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

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 :

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

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 !

**gwyohm** · 06/04/2009, 13h01

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.

**Shirraz** · 06/04/2009, 23h16

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

Placer un observateur sur plusieurs éléments [Prototype]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager