Deffered object avec jQuery

Version imprimable

Bonjour,

J'ai 2 appels Ajax dont le second doit s'exécuter une fois le premier terminé.

Mon premier Ajax envoie la latitude et longitude de plusieurs markers que je récupèrent en bouclant dans une couche cartographique d'une carte Leaflet avec layer.eachLayer. Mon deuxième Ajax lui, appelle ma couche cartographique en WFS afin de la ré-afficher une fois les nouveaux markers reçus dans ma base de données.

Je ne peux donc pas mettre mon 2ème appel Ajax dans le success du 1er car ça rechargerait ma couche carto à chaque fois que j'envoie un marker.

Du coup, j'essaie de passer par les Deffered objects de jQuery, mais ça ne marche pas.

Voilà ce que j'ai essayé de faire :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var dialog_create = $('#dialog_create').dialog();
dialog_create.dialog(options, {
  buttons: {
    Add: function() {
    var defer = $.Deferred();
 
      function getAjaxDeffered(){
        layer.eachLayer(function(layer) {
          latGPS = layer.getLatLng().lat;
          lngGPS = layer.getLatLng().lng;
 
          $('#latitudeEP').val(latGPS);
          $('#longitudeEP').val(lngGPS);
 
          data = $("#formulaireEP").serialize();
 
          $.ajax({
            url: 'assets/php/create/create_EP.php',
            type: $("#formulaireEP").attr('method'),
            data: data,
            success: function() {
              dialog_create_EP.dialog("close");
              $("#formulaireEP")[0].reset();
            }
          })
        })
      }
 
      defer.resolve(getAjaxDeffered());
 
      $.when(defer).then(function(data) {
        //setTimeout(function(){
        $.ajax({
          url: owsrootUrlAssainissement + L.Util.getParamString(parametersEP),
          dataType: 'jsonp',
          jsonpCallback: 'callEP'
        }).done(EPvannes1);
        //},5000);
      });
      return false;
    },
    Cancel: function() {
      dialog_create_EP.dialog("close");
    },
  }
});
dialog_create_EP.dialog("open");

06/10/2016, 01h36
ABCIWEB

Citation:

Envoyé par hippipers

Je ne peux donc pas mettre mon 2ème appel Ajax dans le success du 1er car ça rechargerait ma couche carto à chaque fois que j'envoie un marker.

Je ne vois pas où est le problème, et surtout si tu ne veux pas ce comportement tu veux lequel exactement ?
06/10/2016, 09h38
hippipers

J'ai essayé mais mon premier appel Ajax est dans une boucle qui envoie à chaque fois un marker de ma couche dans ma db.
Le problème c'est que si j'appelle mon deuxième Ajax qui recharge ma couche carto dans le success du 1er Ajax, celui-ci aussi sera dans la boucle et quand j'envoie 200 markers dans ma db,
si ma couche carto doit se recharger 200 fois également, mon navigateur freeze.
Je voudrais donc attendre que mon premier appel Ajax soit terminé et tous les marqueurs envoyés dans ma db pour ensuite déclencher le second Ajax pour recharger ma couche carto, ce, hors de la boucle du 1er Ajax.
06/10/2016, 12h36
Toufik83

Citation:

Envoyé par hippipers

Je voudrais donc attendre que mon premier appel Ajax soit terminé et tous les marqueurs envoyés dans ma db pour ensuite déclencher le second Ajax...

pourquoi ne pas mettre ton deuxième appel Ajax dans complete, et pas dans success?
06/10/2016, 12h49
hippipers

Idem, je viens de réessayer, mon navigateur freeze car il essaye de recharger 200 fois ma couche carto

Voilà la réponse pour la postérité ;-)

Je l'ai trouvée dans ce post :
http://stackoverflow.com/questions/2...d-in-each-loop

Merci à @Toufik83 et @ABCIWEB pour avoir essayé de m'aider.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var dialog_create = $('#dialog_create').dialog();
dialog_create.dialog(options, {
  buttons: {
    Add: function() {
 
      function getAjaxDeffered(){
 
      var promises = [];
 
        layer.eachLayer(function(layer) {
 
        var def = new $.Deferred (); 
 
          latGPS = layer.getLatLng().lat;
          lngGPS = layer.getLatLng().lng;
 
          $('#latitudeEP').val(latGPS);
          $('#longitudeEP').val(lngGPS);
 
          data = $("#formulaireEP").serialize();
 
          $.ajax({
            url: 'assets/php/create/create_EP.php',
            type: $("#formulaireEP").attr('method'),
            data: data,
            success: function() {
              def.resolve();
              dialog_create_EP.dialog("close");
              $("#formulaireEP")[0].reset();
            }
          })
          promises.push(def)
        })
      return $.when.apply(undefined, promises).promise();
      }
 
      defer.resolve(getAjaxDeffered());
 
      getAjaxDeffered().then(function(data) {
        $.ajax({
          url: owsrootUrlAssainissement + L.Util.getParamString(parametersEP),
          dataType: 'jsonp',
          jsonpCallback: 'callEP'
        }).done(EPvannes1);
      });
      return false;
    },
    Cancel: function() {
      dialog_create_EP.dialog("close");
    },
  }
});
dialog_create_EP.dialog("open");

06/10/2016, 14h01
Toufik83

merci à toi également d'avoir partager la solution.