[Résolu] Jquery: Problemes de callback dans une boucle

Bonjour,

Voici mon probleme :

J'ai deux arrays, "liens" et "ids".

Dans "liens", il-y-a des liens et dans "ids", les ids dans lesquels le liens doivent etre charges.

Par exemple, liens[0] doit etre charge dans ids[0],liens[1] doit etre charge dans ids[1], etc...

Voici mon code pour charger tout les liens dans leur ids correspondants.

for (j=0;j<liens.length;j++)
	{
		$('#'+ids[j]).slideUp("slow",function()
			{
				$('#'+ids[j]).load(liens[j] ,function() 
					{ 
						$('#'+ids[j]).slideDown("slow");
					});
			});
	}

Mais cela ne fonctionne pas, les slideUps se font correctement, puis plus rien. (Aucune erreur js dans la console d'erreurs)

Si je fait juste le chargement, cela marche tres bien

for (j=0;j<liens.length;j++)
	{
		$('#'+ids[j]).load(liens[j]);
	}

Si j'utilises les effets sans callback cela marches aussi, mais evidement, il peut arriver que la page ne soit pas encore chargee alors que l'effet slideDown soit deja en action.

for (j=0;j<liens.length;j++)
	{
		$('#'+ids[j]).slideUp("slow");
		$('#'+ids[j]).load(liens[j]);
		$('#'+ids[j]).slideDown("slow");
	}

J'ai l'impression que jquery s'emmele un peu les pinceaux dans les fonctions callbacks.

Comment je peux faire pour utiliser les fonctions callback et ainsi controler les effets et le chargement des pages?

Quelqu'un peux m'aider?
Modifié par Krafton (29 Jun 2007 - 13:14)

Il se peut que les paramétres relatif a l'animation de passent pas dans la fonction callback. Ce que tu peux peut-être essayer c'est d'apeller les deux fonctions l'une aprés l'autre.
jQuery doit avoir un code type oncomplete() qui pourrait te permettre d'attendre que le contenu soit chargé pour commencer l'animation.

Il y a surtout un problème de conception dans ce bout de script .
Pourquoi utiliser jQuery si c'est pour faire des boucles comme ca ?

admettons que que tes liens est tous la classe "liens"

avec jQuery tu peux les atteindres comme ca :

var liens = newArray();
liens[0] = 'url1.php';
etc ...

$('.liens').each( function(i) {

$('#cible'+i)..load(liens[i] ,function()  {});
.... etc

});

mais pour etre sur de ce que tu veux faire il faut la portion html et les déclarations de variables .[/i]
Modifié par PeterPetrelli (28 Jun 2007 - 07:48)

Merci pour votre aide, j'ai essaye la methode de matmat mais le resultat est le meme.

for (j=0;j<liens.length;j++)
	{
		var myid='#'+ids[j];
		$(myid).slideUp("slow",{onComplete:function()
			{
				$(myid).load(liens[j] ,{onComplete:function() 
					{ 
						$(myid).slideDown("slow");
					}});
			}});
								 
	}

J'ai aussi essaye d'utiliser les apis ajax, mais sans succes

for (j=0;j<liens.length;j++)
	{
		var myid='#'+ids[j];
		(myid).slideUp("slow",function()
			{
				$.ajax({
						url: liens[j],
  						success: function(data) 
							{ 
								$('#primaryContentContainer').html(data);
								$(myid).slideDown("slow");
							}
 					});
			}
	}

J'ai du mal à comprendre pourquoi ça ne marche pas...

Tu peux essayer de le faire en deux étapes, premiérement charger le contenu et ensuite rajouter un bouton pour lancer l'effet, de cette maniére tu peux verifier tes deux fonctions independament. Une fois que ça marche il faut verifier que le contenu est bien là au moment du démarage de l'effet.

Essaye peut-être en testant avec des alert pour voir si le contenu chargé par load ou ajax est bien là au moment de l'appel de "slideDown", en effet jQuery doit avoir besoin de offsetHeight pour savoir qu'elle est la hauteur de la div pour l'effet, et si il ne l'a pas c'est peut-être pour ça que ça ne marche pas.
Modifié par matmat (28 Jun 2007 - 16:58)

oui matmat, j'ai mis des alert partout, tjs le bon resultat affiche, la page se charge bien. Quand je charge uniquement la page, ca fonctionne bien.

PeterPetrelli, each() n'est pas vraiment utilisable dans ce que je veux faire.

Finalement j'ai reussi a le faire fonctionner en utiliser une fonction, je ne sais pas pq mais ca marches bien comme ca :

function clicks()
	{
		for (j=0;j<liens.length;j++)
			{
				var cetId='#'+ids[j];
				var ceLien="pages/"+liens[j]+".html";	
				loadPage(ceLien,cetId);		 
			}
	}

function loadPage(lien,id)
	{
		$(id).slideUp("slow",function()
			{
				$(id).load(lien,function()
					{
						$(id).slideDown("slow");
					});
			});
	}

Merci matmat et PeterPetrelli pour vos conseils.

Ne serait-ce pas l'index j qui, inadapté lors de l'appel de la fonction de callback, expliquerait le dysfonctionnement de la première proposition ?