11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai un problème que je n'arrive pas à résoudre depuis plusieurs jours.

J'ai un menu déroulant qui, lorsque l'on change l'option, charge un fichier php via une fonction load :


		$("#sexe").change(function(){
				var a = $('#sexe option:selected').val();
				$("#col_droite").load("listing_prof.php?maj=sexe&etat="+a);
        						
		       	return false;
		});


Dans mon fichier listing_prof, j'ai plusieurs div, dont une que je souhaiterai faire apparaitre en fondue lorsque le fichier load est appelé...

J'ai essayé ce code :


		$("#sexe").change(function(){
			$("#cadre_bestprof").delay(800).fadeIn(400);
			var a = $('#sexe option:selected').val();
			$("#col_droite").load("listing_prof.php?maj=sexe&etat="+a);			
		       	return false;
		});


Je précise que la div #cadre_bestprof à un style="display:none;"
Mais cela ne marche pas, la div #cadre_bestprof se charge mais disparait aussitôt. Ce qui peut être logique vu que l'on reload la page. Mais si je met le fadein apres la loader, alors rien ne se passe...

Merci pour votre aide.
Modifié par sweety808 (08 Apr 2011 - 13:03)
Bonjour, avant de faire le fadeIn, tu dois attendre que le contenu soit chargé ... c'est à dire faire le fadeIn dans le callback de ton load:

$("#col_droite").load("listing_prof.php?maj=sexe&etat="+a, function(){
   $("#cadre_bestprof").fadeIn(400); 
});  
C'est peut-être un pb d'event delegation: ton js ne s'applique pas au contenu chargé dynamiquement.
Regarde du coté de .live().
Si tu as une page en ligne, ça sera plus simple.
Merci loicbcn, le problème venait effectivement du fait que le fadein ne s'appliquait pas au contenu nouvellement chargé.

Je n'ai pas testé la solution de Paolo, mais je pense qu'elle devrait marcher aussi !

Merci à vous deux.