Discussion :

[Shirraz]

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]

Salut,

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

[Shirraz]

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]

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

[Shirraz]

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]

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