Discussion :

[Emyleen]

Bonjour,

Je sais le titre est pas très explicite et je n'ai pas vraiment trouvé où poster ma question, donc voila je la met là.

J'utilise le plugin jqzoom de JQuery afin de faire un joli effet de zoom sur l'image d'un produit de mon catalogue.

Voici mon code :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
	$(".produit a").live("click", function() {
		alert("chargement");
		$('.jqzoom').jqzoom({
			zoomType: 'reverse',
			lens:true,
			preloadImages: false,
			alwaysOn:false
		});
	//$('.jqzoom').jqzoom();
	});
});

Comme vous pouvez le remarquer il y a un "alert()" dans mon code. C'est ça que je ne comprend pas : Si je met le alert la fonction fonctionne bien j'ai mon joli zoom tout ça tout ça, si j'enlève le alert ben...ma fonction jqzoom n'est pas appelée, du coup je n'ai pas mon effet de zoom.

Le contexte : ma fonction click s'applique sur un élément chargé dans une div via un appel ajax, c'est pourquoi j'utilise la fonction live.

Déroulement : M page se charge, ma div de liste de produit se rempli en ajax, je clique sur le titre d'un produit et la même div se rempli du détail du produit toujours en ajax. Le zoom se situe sur le détail du produit bien sur.

Comment faire fonctionner ça sans être obligé de mettre un alert()?

Merci d'avance pour vos réponses

[Willpower]

Est-ce que l'élément de classe jqzoom existe déjà lors du moment du click ou bien est-il chargé à ce moment là via un 2ème événement click ?

[RomainVALERI]

Je suis loin d'être un spécialiste de jQuery donc il y a probablement moyen de résoudre ça en remontant aux causes ...mais par défaut et en attendant je suggèrerais de décaler l'exécution de ce qui suit l'alert de quelques millisecondes...

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
	$(".produit a").live("click", function() {
		setTimeout(function() {
			$('.jqzoom').jqzoom({
				zoomType: 'reverse',
				lens:true,
				preloadImages: false,
				alwaysOn:false
			});
		}, 10);
	//$('.jqzoom').jqzoom();
	});
});

[Emyleen]

@Willpower : 2è réponse! l'élément jqzoom se charge au moment du click sur mon lien a.

@RomainVALERI : Je vais tester ta proposition, je reviens te donner le résultat.
Edit : rien ne se passe, la fonction jqzoom n'est pas chargée.

Merci de vos réponses si rapides

[Willpower]

@Willpower : 2è réponse! l'élément jqzoom se charge au moment du click sur mon lien a.

@RomainVALERI : Je vais tester ta proposition, je reviens te donner le résultat.
Edit : rien ne se passe, la fonction jqzoom n'est pas chargée.

Merci de vos réponses si rapides

Au moment du click ? Donc tu envoies une requetes ajax, tu déclenches une fonction "jqzoom" sur un objet qui n'existe pas encore. Tu reçois ta réponse ajax et l'objet "jqzoom" est créé.


En gros, tu as 2 évènements onclick sur un même objet, c'est affreusement mal ! (j'imagine bien que le premier est sans doute implicite dans une librairie).

Pour résoudre cela, le mieux c'est de placer ta 2ème fonction de zoom dans le call back de l'appel ajax.

Une autre solution serait de régler ton appel ajax de façon "synchrone" pour qu'il bloque le code en attendant la réponse (je le déconseille.)

[Willpower]

Peut-être qu'une 3ème solution en utilisant "live" est envisageable, du genre :

Code :

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

1
2
3
4
5
6
7
$('.jqzoom').live('load',function(){
			$(this).jqzoom({
				zoomType: 'reverse',
				lens:true,
				preloadImages: false,
				alwaysOn:false
			});

Mais je ne suis pas sûr que ça fonctionne et puis je pense que l’évènement "load" ne fonctionne que pour certains éléments comme les images, etc. possèdant un attribut "src".


Bref, j'essayais juste de garder le "live" que j'avais vu dans ton code mais c'est une mauvaise idée finalement je pense, oublie ce message.

[Emyleen]

Merci Willpower, c'est vrai que j'aurai du y penser, c'est quand j’appelle ma fonction de chargement ajax que je dois aussi charger ma fonction de zoom.

Oui mais voila, je n'utilises pas jquery pour faire de l'ajax! Tout simplement car je débutes et je viens juste de découvrir qu'on pouvait faire de l'Ajax avec Jquery... Toujours est-il que voici la fonction que j'utilise pour voir le détail de mon produit :

Code javacript :

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
function voirDetail(element)
{ 
	var req =  createInstance();
	req.onreadystatechange = function() { 
		if(req.readyState == 4){
			if(req.status == 200 || req.status == 0) {
				document.getElementById(element).innerHTML = req.responseText; 
			}	
			else {
				alert("Error: returned status code " + req.status + " " + req.statusText);
			}
		}
	}; 
	req.open("POST", "/catalogue/scripts/detailProduit.php", true); 
	req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	document.getElementById('affichage').style.visibility = 'hidden';
	catalogue = document.getElementById('zlCatalogue').value;
	gamme = document.getElementById('IDgamme').value;
	famille = document.getElementById('IDfamille').value;
	produit = document.getElementById('IDproduit').value;
	req.send("&IDcatalogue="+catalogue+"&IDgamme="+gamme+"&IDfamille="+famille+"&IDproduit="+produit); 
}

Et là... j'avoue que je ne vois pas du tout où mettre ma fonction de zoom Oo

J'ai essayé de la mettre dans le fichier detailProduit.php mais elle ne se charge pas

Une idée?

Edit : j'ai bidouillé un truc moyen, j'ai mis ma fonction dans un "onmouseover" appelé sur ma div de détail du produit. Maintenant si on y accède via un ipad, pas sur que ça fonctionne...

[Willpower]

à partir du moment où tu t'encombres d'une librairie, essaye de l'utiliser à 100% et de ne plus faire de js pur.


enfin, en reprenant ton code il suffit de rajouter une ligne

Code :

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

1
2
3
4
5
6
7
8
9
if(req.status == 200 || req.status == 0) {
    document.getElementById(element).innerHTML = req.responseText; 
    $('.jqzoom').jqzoom({
        zoomType: 'reverse',
        lens:true,
        preloadImages: false,
        alwaysOn:false
    });
}

[Emyleen]

Merci encore Willpower, je crois qu'au delà de mon problème j'ai pas mal avancé dans ma compréhension de jQuery, je penses que je vais essayer de convertir toutes mes fonction javascript pure en jquery comme tu dis, pour utiliser au maximum la librairie

Problème résolu ^^

Bonne journée!