sélecteur suite à une requête ajax

Version imprimable

Bonjour,

j'ai un problème avec l'une de mes requêtes AJAX réaliser via Jquery.

Dans mon premier fichier index.html, je réalise l'appel du script result.php comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript"> $(document).ready(function() { $('#show_results').live('click', function() { $.ajax({ type: "GET", url: "result.php", error:function(msg){ alert( "Error !: " + msg ); }, success:function(data){ $('#results').html(data); }}); return false; }); }); </script>
Le fichier result.php quand lui réalise tout simplement une boucle pour afficher x div avec une class identique pour tous.

Cela pourrai très bien fonctionner mais par exemple si j'ai 10 div qui me sont retourné, ils apparaitrons en même temps, ce qui me plais moyennement.

j'avais pensais faire dans success :
Code:

1 2 3 $('.maClass', data).each(function() { $(this).fadeIn(slow); });
Pour effectuer un affichage en cascade des messages.

Mais le sélecteur $('.maClass', data) ne fonctionne pas.

Ma méthode est elle la bonne ?
Merci d'avance pour votre aide.

Couss

01/12/2010, 09h53
Bovino

Il faut préciser que data est supposé être du HTML :

Code:

dataType: 'html',

Bonjour,

Merci de pour ton aide. Mais malheureusement cela viens pas de ça.
J'avais essayer en précisant le type de réponse sans succès, je croit en plus que html est le type par défaut.

Néanmoins j'ai réussi a contourner le problème en remplissant le div avec mes données retourné puis en cachant sont contenue comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
        $(document).ready(function() {
            $('#show_results').live('click', function() {
                $.ajax({
                   type: "GET",
                   url: "result.php",
		   dataType: 'html',
                   error:function(msg){
                     alert( "Error !: " + msg );
                   },
                   success:function(data){
                        $('#results').html(data);
                        $('#results .classTest').hide().each(function() {
                            $(this).fadeIn(3000);
                        });
                }});
 
                return false;
            });
        });
    </script>

Je rencontre par contre toujours un problème avec l'affichage des div qui devrai se faire progressivement avec 3 sec intervalle les un après les autres.
Ce qui n'est pas le cas ici tous les div s'affiche en 3sec.

Couss

01/12/2010, 10h41
gwinyam

Pour un affichage successif, on a déjà traité le cas ici:
http://www.developpez.net/forums/d10...in-boucle-for/
L'idée est d'utiliser la méthode de callback que tu peux appeller à la fin du fadeIn.

Ce n'est pas exactement la même façon de lister les éléments que toi, mais le résultat désiré est le même. Tu peux donc t'inspirer de la solution.;)
01/12/2010, 11h04
Couscouss sensei

J'avais pensé utilise la fonction callback de fadeIn en retournant true pour passer à l'itération suivante du each() de cette facon :

Code:

$(this).fadeIn(3000).delay(5000, function() {return true;});

Mais cela ne fonctionne pas.

Et je rencontre un problème c'est que je connais pas à l'avance combien de div j'aurais et je n'est pas la possibilité d'utiliser d'id, seulement des classes.
Donc pour la récursivité c'est impossible.

Merci quand même

Couss
01/12/2010, 12h34
gwinyam

Citation:

Envoyé par Couscouss sensei

Code:

$(this).fadeIn(3000).delay(5000, function() {return true;});

Mais cela ne fonctionne pas.

ça c'est pas vraiment étonnant. Là ton callback, tu l'as mis sur delay() alors que je t'avais suggéré sur fadeIn().

De plus le delay() là repousse l'action qui la suit. Mais vu qu'il n'y a rien derrière, ça tourne dans le vent. Pendant que le moteur sera déjà passé à l'itération suivante de ton each.
01/12/2010, 12h41
Couscouss sensei

J'ai essayer sur le fadeIn et sur le delay

Oui le delay() là repousse l'action qui la suit de 3 sec et ensuite exécute la fonction callback qui renvoi true et donc normalement fait passer au div suiviant.
01/12/2010, 12h51
gwinyam

Citation:

Envoyé par Couscouss sensei

J'ai essayer sur le fadeIn et sur le delay

Oui le delay() là repousse l'action qui la suit de 3 sec et ensuite exécute la fonction callback qui renvoi true et donc normalement fait passer au div suiviant.

ça repousse l'instruction suivante dans la pile. Hors il n'y a pas d'instruction suivante dans la pile.

tu devrais déporter ton fadeIn dans une autre méthode dédiée et dans laquelle tu pourras utiliser la méthode de callback dans le fadeIn et même une récursivité.
01/12/2010, 12h55
Couscouss sensei

Oula pas tout compris ^^.

C'est comme la méthode décrite dans le lien que tu ma linké plus haut ?
C'est possible sans id des div ?
01/12/2010, 13h54
gwinyam

Dans le success de ton appel ajax, tu laisses l'instruction html() et le hide().
Après tu appelles une fonction séparée qui appliquera le fadeIn mais seulement sur le premier élément correspondant à ton sélecteur. Dans le callback de ce fadein, tu rappelles cette fonction avec le prochain élément correspondant à ton sélecteur si il existe. Si il n'existe pas, tu t'arrêtes.
Récursion terminale et effet progressif désiré.

Pour la pile d'appels, c'est assez simple:
Tu fais ça:
#début de la pile
-> Je cache tout
-> Je fais un fadeIn
-> Je repouse de 300 la prochaine exécution de la pile
#fin de la pile, retour au début pour une prochaine itération
Vu que ton delay est le dernier élément exécuté dans ta pile, il tourne dans le vent. La prochaine itération correspond à une "autre" pile d'exécution et n'est donc pas impactée par tes delay. D'où la simultanéité de tes fadeIn malgré le delay.

Merci pour ta réponse et pour avoir résolu mon problème.

Je met mon code pour avoir confirmation sur la méthode utilisé, mais le résultat est la.

Code:

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
30
31
32
$(document).ready(function() {
	function fadeInSuccessif(obj, id) {
		var obj_courant = $(obj).eq(id);
 
		if($(obj_courant).length){
			$(obj_courant).fadeIn('fast', function() {
				fadeInSuccessif(obj, id+1);
			});
		}
		else { return false; }
	}
 
	$('#show_results').live('click', function() {
		$.ajax({
			type: "GET",
			url: "result.php",
			dataType: 'html',
 
			error:function(msg){
				alert( "Error !: " + msg );
			},
 
			success:function(data){
			$('#results').html(data);
				$('#results .classTest').hide();
				fadeInSuccessif($('#results .classTest'), 0);
			}
		});
 
		return false;
	});
});

Je mettrai sur résolu une fois confirmation ;)
Merci encore

01/12/2010, 16h23
gwinyam

Bon déjà si ça marche, tant mieux, mais t'aurais pu faire un poil plus simple.
Avec un seul argument à ta méthode fadeInSuccessif et plus précisément l'objet sur lequel doit être appliqué le fadeIn.
Comme ça dans ta récursion, tu appelles le suivant (voir du côté de .next()), et t'as pas besoin de faire un eq à chaque fois tout en réduisant ton nombre de paramètres.
Au passage cette partie là:

Code:

else { return false; }

Elle ne sert strictement à rien. Idem pour le return false tout à la fin de ton script.
01/12/2010, 17h00
Couscouss sensei

Voila c'est corriger.
Merci pour tes précieux conseil, je débute en jquery et je connais pas encore toutes l'étendu de ces fonctions, mais heureusement il y a une doc de qualité.

Couss
01/12/2010, 19h59
gwinyam

Pas de soucis, on a tous débuté un jour.