1

First of all, you should know I have nested $.ajax calls. The first one prints the table and when it's complete I am doing the second $.ajax for each <tr> in the table. Both use async: true.

I'm doing this because I want to give a view (the table) to the final user and then 3 <td> have to load data from other URL. After this explanation:

$.ajax({
  // ...
  complete: function() {
    $('table tbody tr.product').each(function(i) {
      let line = $(this);
      ...
      // set variable
      const data = { ...
      };
      // data values are from prev varaibles
      $.ajax({
        type: 'POST',
        url: URIPOS,
        data: data,
        async: true,
        beforeSend: function() {
          tdMostSales.html('<i class="fa fa-spinner fa-spin fa-1x"></i>');
          tdSubscriptions.html('<i class="fa fa-spinner fa-spin fa-1x"></i>');
          tdGeneral.html('<i class="fa fa-spinner fa-spin fa-1x"></i>');
        },
        success: function(res) {
          const resp = JSON.parse(res);
          const {
            general,
            prevision
          } = resp;
          const {
            total,
            notified
          } = resp.subscription;
          tdMostSales.attr('data-value', prevision)
          tdMostSales.html(`${prevision}`);
          tdSubscriptions.html(`${notified}/${total}`);
          tdGeneral.html(`${general}`);
        },
        complete: function() {
          tdMostSales.blur();
        }
      });

      if (i + 1 === $('table tbody tr.product').length) {
        console.log('finished')
        var options = {
          valueNames: [
            'name',
            'sku',
            'brand',
            'match',
            'profit',
            'profit-rating',
            'sell-rating',
            {
              name: 'pvp',
              attr: 'data-value'
            },
            {
              name: 'demand-forecast',
              attr: 'data-value'
            }
          ],
          listClass: 'product-list-body'
          //pagination : true,
          //page: 20
        };
        var orderedList = new List('generator', options);
        return;
      }
    });
  }
});

but with this, it return the console.log('finished') when the $.ajax haven't finished yet, still working on some <tr>, so how can handle this? Maybe a callback when each finish but Where to do this or how?

I don't think this is a duplicate post... because I don't want to make differents ajax and then get a response I need to make one request and once it finish, make the next one, this second have to iterate each tr and make a request for each one but async and once it is finished (no need to make more request) return a response after all tr were iterate by the ajax.

S. Wasta
  • 599
  • 9
  • 35
  • You need to aggregate all the promises from `$.ajax` in to an array and then apply that to `$.when`. See the duplicate for more information about that. Also note that making AJAX requests in a loop is a really bad idea. Id' strongly suggest you make a single request and return all information within that. Doing it this way will both avoid the issue you have, and also make your server perform far better. – Rory McCrossan Nov 21 '19 at 09:28
  • Hmmm... I tried before but it does nothing when `.each` and/or return 'finished' and haven't finish yet. How should I do the function which make a request for each tr? I can't write return because if I do, it will only send once, it doesn't even go inside `each`. – S. Wasta Nov 21 '19 at 09:54

0 Answers0