Discussion :

[Couscouss sensei]

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 :

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
<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 :

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

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

[Bovino]

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

Code :

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

dataType: 'html',

[Couscouss sensei]

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 :

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
<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

[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.

[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 :

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

$(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

[gwinyam]

Code :

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

$(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.