Discussion :

[boutmos]

Bonjour,

Auriez vous rencontré des problèmes sur vos .animate() depuis la version 1.4.2 de Jquery ???

Après quelques tests , on dirait que la version 1.4.2 de Jquery ne gère plus les queues d'évènements exactement de la même façon qu'auparavant.

d'avance , merci.

[danielhagnoul]

Bonsoir.

La question serait plus intéressante si elle était enjolivée par un ou plusieurs exemples !

[boutmos]

Je n'ai pas donné d'exemple de code car je n'arrive pas trop a identifier l'origine de mon problème. J'ai juste un gros doute sur mon callback dans la fonction itemClicked() :

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
20
21
22
 
			// Reset position des items cachees
			$(".item").each(function(i){
				$(this).animate({
					marginTop: "0px",
					opacity : 0.65
				},700, function() {
					var n = jQuery.queue( $(".item")[0], "fx" );
					$("#queue").append("Queue length is: "+n.length);					
 
					// Restaure les liens sur les fleches
					$("#leftArrow, #rightArrow").css("cursor", "pointer");
					// Reset Opacite des fleches et curseur
					$("#upArrow, #downArrow").stop().animate({opacity: 0.25});
					$("#upArrow, #downArrow").css("cursor", "default");
					// Restaure les evenements mouseEnter mouseLeave sur les items
					$(".item").bind("mouseenter", function(e){ $(this).stop().animate({opacity: 1}, "normal"); });
					$(".item").bind("mouseleave", function(e){ $(this).stop().animate({opacity: 0.65}, "normal"); });
					// Restaure l'evenement click sur les items					
					itemClicked();
				});
			});

Si vous voulez voir la reaction : Click ICI

Le probleme se declenche comme suit :

1- click sur une image, tout est OK
2- click sur l'image pour le retour, tout OK
3- click sur une image pour voir un 2eme projet et la , tout déconne.

Je certifie que je n'ai aucun bug dans mes animation avec la version 1.4.1

D'avance merci

[danielhagnoul]

Bonsoir.

La fonction itemClicked() est une fonction récursive à cause de

Code :

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

1
2
// Restaure l'evenement click sur les items					
itemClicked();

dans la fonction de rappel.

Mais lors de la récursion, rien ne garantit que la suite de la fonction itemClicked() ait été exécutée à chaque appel.

[boutmos]

BOn j'ai trouvé cette solution :

1- Determiner le nombre de projets présents dans mon fichier Json
2- Encapsuler mon callback par une instruction conditionnelle comme suit :

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
20
21
 
// Reset position des items cachees
$(".item").each(function(i){
	$(this).animate({
		marginTop: "0px",
		opacity : 0.65
	},700, function() {
		if ( i == nbProjets ) {
			// Restaure les liens sur les fleches
			$("#leftArrow, #rightArrow").css("cursor", "pointer");
			// Reset Opacite des fleches et curseur
			$("#upArrow, #downArrow").stop().animate({opacity: 0.25});
			$("#upArrow, #downArrow").css("cursor", "default");
			// Restaure les evenements mouseEnter mouseLeave sur les items
			$(".item").bind("mouseenter", function(e){ $(this).stop().animate({opacity: 1}, "normal"); });
			$(".item").bind("mouseleave", function(e){ $(this).stop().animate({opacity: 0.65}, "normal"); });
			// Restaure l'evenement click sur les items
			itemClicked();					
		}
	});
});

Depuis mon code fonctionne de nouveau correctement. Ce que je ne m'explique pas c'est pourquoi d'une version a l'autre de Jquery , il est parti en vrille.

[boutmos]

J'hésite à ouvrir un topic mais j'ai par contre une question concernant JSON et requete Ajax par Jquery :

Pkoi lorsque j'edite mon fichier JSON et que j'actualise ma page cela marche sur tout les navigateurs mais sur aucun des IE(6,7,8) ?? (obligé de fermer le navigateur et recharger le projet...)

Une derniere question :

lorsque j'execute ceci :

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
20
21
22
23
24
25
26
27
28
29
 
function ajaxJson(){
	$.ajax({
		url : "json/sites.js",
		dataType: 'json',
		contentType: "application/json; charset=utf-8",
		success : function(data) {
			$.each(data.portofolio.projet, function(i, item){
				var id = item.id;
				var title = item.title;
				var image = item.image;
				var url = item.url;
				nbProjets = i;				
			});			
		},error: function(data) {
			alert('erreur dans la requete Ajax');
		}
	});
}
 
function randomProjets(){
	alert("nbProjets = "+nbProjets);	
	loadingItem = "<div class='loadingItem'></div>";
 
	for ( i = 0 ; i <= nbProjets ; i++ ) {
		$(loadingItem).appendTo("#itemsContainer");
	}
 
}

dans mon $(document).ready.... j'appel bien ces fonctions dans l'ordre ci dessus. Mon alert me mets 0 (prédéfini) et par contre ma boucle utilise bien la valeur retournée par la requete sur le JSON.

[boutmos]

pour l'alert(); j'ai fixé aussi le probleme.

Il ne faut plus que j'appel ma fonction dans le document.ready mais plutot sur le complete de la requete Ajax comme suit :

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
20
21
22
23
24
function ajaxJson() {
	$.ajax({
		url : "json/sites.js",
		dataType: 'json',
		contentType: "application/json; charset=utf-8",
		success : function(data) {
			$.each(data.portofolio.projet, function(i, item){
				var id = item.id;
				var title = item.title;
				var image = item.image;
				var url = item.url;
				nbProjets = i;
			});		
		},
		error: function(data) {
			alert("erreur dans la requete Ajax");
		},
		complete: function(data) {
			alert("Complete");
			randomProjets();
		}
	});
}

Dans l'état actuel de mon projet, il ne me manque plus qu'a comprendre pkoi lorsque je modifie mon JSON, je suis obligé de fermer et ouvrir le navigateur pour prendre en compte mes modifications sur le fichier JSON

[boutmos]

c'est bon , il fallait rajouter

Code :

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

cache: false,

dans ma requete ajax