IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Appels ajax imbriqués


Sujet :

AJAX

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 48
    Points : 40
    Points
    40
    Par défaut Appels ajax imbriqués
    bonjour,

    je me lance avec ajax, et je suis confronté à l'imbrication de requêtes en ajax.

    J'exécute une 1ère requête qui me retourne un objet json dans lequel j'ai des string, mais aussi des ID.

    Je parcours ma 1ere requête avec une boucle for ( for (var i = 0; i < data.length; i++)), et j'exécute une seconde requête ajax qui est sensée me retourner la valeur correspondante à mon 1ere ID...et c'est là mon problème, je ne trouve pas la bonne méthodologie.

    J'ai essayé avec le success mais sans succés...du coup, j'essaye avec le done...mais ça ne change rien.



    Merci de votre aide.

    Ci-dessous, un exemple de mon code pour lequel je tente de récupérer la marque du véhicule en clair à partir de l'id que je récupère dans ma 1ere requête ajax :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    {mesVehiculeID: 1, marqueId: 2, type: "308", immatriculation: "JU-951-DE", etatId: 2}
    Finalement, j'obtiens un 'undefined' au lieu de la marque.
    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
    $.ajax({
               type: 'GET',
               url: 'donnees/fichier.json',
               dataType: 'json'
                }).done(function(data){
                    for (var i = 0; i < data.length; i++) {
     
                        var nom_div = 'div' + i;
                        $("#ajoutdiv").append("<div><li class='col-xs-6 col-sm-3 col-md-2 col-lg-3 div_vehicule'><div id=" + nom_div + " class='divVehicules'></div></li></div>");
     
                        var marque_du_vehicule;
     
                        var urlMarque = 'marques/' + data[i].marqueId + '.json';
     
                        $.ajax({ 
                            url: urlMarque,
                            type: 'GET', 
                            dataType: 'json'
                        }).done(function(dataMarque){
                            marque_du_vehicule = dataMarque.marque;
                            var contenu = "<span class='police_texte'>" + marque_du_vehicule + "<br/>" + data[i].type+ "<br/>" + data[i].immatriculation+ "<br/>" + data[i].etatId+ "<br/></br></span>" +
                                    "<a data-toggle='modal' data-id=" + data[i].mesVehiculeID+ " class='edit_vehicule' href='#myModalModifVehicule'><img src='ressources/images/edit64.png' /></a>&nbsp;&nbsp;" +
                                    "<a href=''><img src='ressources/images/recycle.png' /></a>";
     
                            var nom_div = '#div' + i;
                            $(nom_div).html(contenu);
                        });
                    }
                });

  2. #2
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 48
    Points : 40
    Points
    40
    Par défaut
    je viens de mettre un async: false sur la 2eme requete, et ça fonctionne...

    J'ai donc fait la même chose sur la 3eme requête me permettant de récupérer la valeur en clair de mon 2eme ID, et j'ai un temps de réponse en localhost d'environ 4 secondes !!!

    Est-ce la bonne méthode ?

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    j'ai du mal à comprendre pourquoi tu enchaines plusieurs requêtes dans ta fonction success, sans autre intervention de l'utilisateur, et que tu ne fais pas la recherche/retour directement coté serveur ?

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 48
    Points : 40
    Points
    40
    Par défaut
    malheureusement, je ne code pas côté serveur, mais côté client...de ce fait, je fais avec ce que me donne le développeur côté serveur...

    et lui, il me donne des url pour allez chercher la correspondance ID - texte en clair

    Je pensai que cela était normal...et que moi, de mon côté, je devais me débrouiller pour lui retourner des ID ?

    non ?

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    J'ai du mal à comprendre la logique mais je dirais,
    a réception de ta 1st requête, tu récupères l'ID puis tu relances une 2nd requête en passant en paramètre cette ID, mais sans envoyer d'autre requête, une seule suffit. Tout ceci se passe donc dans ta fonction success.

    Actuellement tu as de toutes façons un soucis avec la valeur de ton i dans tes boucles au retour, asynchrone, de tes requêtes.

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 48
    Points : 40
    Points
    40
    Par défaut
    Merci pour ta réponse.

    Effectivement, le i dans la seconde requête n'était pas correct, et j'ai donc créé un j++ pour la seconde requête dans le success de la 1ère.....et je me suis dit que pour la 3eme requête, il m'aurait fallut créer un k++ dans le success de ma deuxième....enfin bref, je me suis dit que ce n'était sans doute pas la bonne méthode.

    Par contre, désolé, je suis sans doute dur de la feuille :-), mais quand tu dit :

    "a réception de ta 1st requête, tu récupères l'ID puis tu relances une 2nd requête en passant en paramètre cette ID, mais sans envoyer d'autre requête, une seule suffit."

    je n'arrive pas à suivre ton raisonnement sur la fin de ton explication : "puis tu relances une 2nd requête en passant en paramètre cette ID, mais sans envoyer d'autre requête, une seule suffit"

    Dans la première requête, je récupère effectivement 2 ID, pour lesquels je dois relancer 2 requêtes ajax depuis le success de la première non ?

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    j'ai compris, dur à la détente sur ce coup

    Dans ton cas il te faut « externaliser » la 2éme requête en lui passant les paramètres qui la concerne, cela pourrait ressembler à cela :
    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
    function getDetails(idDest, data) {
        var urlMarque = 'marques/' + data.marqueId + '.json';
        var marque_du_vehicule;
        var contenu;
        $.ajax({
            url: urlMarque,
            type: 'GET',
            dataType: 'json'
        }).done(function(dataMarque) {
            marque_du_vehicule = dataMarque.marque;
            contenu = '<span class="police_texte">' + marque_du_vehicule + '<br/>' + data.type + '<br/>' + data.immatriculation + '<br/>' + data.etatId + '<br/></br></span>' +
                '<a data-toggle="modal" data-id=' + data.mesVehiculeID + ' class="edit_vehicule" href="#myModalModifVehicule"><img src="ressources/images/edit64.png" /></a>&nbsp;&nbsp;' +
                '<a href=""><img src="ressources/images/recycle.png" /></a>';
            $('#' + idDest).html(contenu);
        });
    }
    et l'appel se fait à partir de ta 1ére requête
    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
    $.ajax({
        type: 'GET',
        url: 'donnees/fichier.json',
        dataType: 'json'
    }).done(function(data) {
        var nom_div;
        var i;
        var nb = data.length;
        for (i = 0; i < nb; i += 1) {
            // ajout élément
            nom_div = 'div' + i;
            $('#ajoutdiv').append('<div><li class="col-xs-6 col-sm-3 col-md-2 col-lg-3 div_vehicule"><div id="' + nom_div + '" class="divVehicules"></div></li></div>');
     
            // recup des détails
            getDetails(nom_div, data[i]);
        }
    });
    Remarque : le code HTML résultant n'est pas exempt de reproche !
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div>
      <li>
        <div id="">
          <span>
            ...<br/>
            ...<br/>
            ...<br/>
            ...<br/>
            </br>
          </span>
          <a href=""><img src="" /></a>&nbsp;&nbsp;
          <a href=""><img src="" /></a>';
        </div>
      </li>
    </div>

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    48
    Détails du profil
    Informations personnelles :
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Octobre 2008
    Messages : 48
    Points : 40
    Points
    40
    Par défaut
    super....merci beaucoup.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Fonction .call() avec deux ajax imbriquées
    Par alain_42 dans le forum jQuery
    Réponses: 4
    Dernier message: 26/12/2013, 10h34
  2. Réponses: 6
    Dernier message: 26/04/2010, 14h44
  3. [AJAX] Fonctions ajax imbriquées
    Par dubitoph dans le forum AJAX
    Réponses: 1
    Dernier message: 15/10/2009, 16h21
  4. [AJAX] requete ajax imbriquée
    Par affreuxzozo dans le forum AJAX
    Réponses: 9
    Dernier message: 14/05/2009, 15h44
  5. [AJAX] Ajax avec un xml à balises imbriquées
    Par 4R416N33² dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 30/10/2007, 10h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo