-2

I have a table. Initially it is blank. there are supposed to be 10 rows in total. For that each row has to make a ajax call and get the data. so total 10 parallel AJAX calls. and requirement is also to update the rows sequentially. which means even if the data of row 5 comes before 2, the row 5 data is not update until row 2, 3 and 4 is updated. How do we achieve this?

gopal rao
  • 293
  • 1
  • 12
  • Why not just get all 10 rows at the same time? – ediblecode Apr 20 '15 at 11:54
  • use ajax `async:false` – ozil Apr 20 '15 at 11:54
  • @ozil - I want the calls to be asynchronous, not the other way – gopal rao Apr 20 '15 at 11:55
  • 2
    @gopalrao I see, and what have you tried? – ediblecode Apr 20 '15 at 11:57
  • what @jumpingcode means is that you could change the "url" endpoint so instead of retrieving 1 data each, can retrieves all 10 rows, but this works only if you can change the endpoint of course – Manjar Apr 20 '15 at 11:58
  • `async: false` is pretty much a bad idea in nearly all circumstances. – Andy Apr 20 '15 at 11:58
  • @jumpingcode - I have not tried anything in paper. Its more of a conceptual question. how? verbal! – gopal rao Apr 20 '15 at 12:03
  • @gopalrao [jQuery Deferred](http://stackoverflow.com/questions/5627284/pass-in-an-array-of-deferreds-to-when) to update a datasource. Then when all are done, update the table – CodingIntrigue Apr 20 '15 at 12:03
  • You could store the data from the request in an array (using a callback for each request) and wait until all data has been sent. Then you can update your table. – John Doe Apr 20 '15 at 12:04
  • @RGraham Why would you wait until all are done to update the table? – ediblecode Apr 20 '15 at 12:04
  • you keep the track of the all 10 calls, when each one of them fire "success" you must update an array with the position (so if you got x, the loaded[x] = true for example). On each success check if all data not rendered is loaded to update them. – Manjar Apr 20 '15 at 12:05
  • @jumpingcode Wasn't that the requirement? Maybe I misread it – CodingIntrigue Apr 20 '15 at 12:05

1 Answers1

1

One solution might be to use jQuery's promise interface alongside passing in an array of those promises to $.when using apply:

var urls = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// return a promise for each url
function getData(url) {
  return $.ajax({
    url: url
  });
}

// return an array of promises
function getPromises(urls) {
  return urls.map(function (url) {
    return getData(url);
  });
}

// when all the promises have been returned loop over the returned
// data and update the table sequentially with each row
$.when.apply(null, getPromises(urls)).then(function () {
  for (var i = 0, l = arguments.length; i < l; i++) {
    // update row with the data from arguments[i]
  }
});

Note that I've not tested this code, but this is certainly the route I would attempt to take.

Andy
  • 61,948
  • 13
  • 68
  • 95
  • This is an excellent suggestion (utilizing the promises here) and definitely the cleanest way to deal with it. The only thing I'd change is to chain the `then`s so row 5 only depends on 1..4 and not the rest so it sequences more eagerly. – Benjamin Gruenbaum Apr 20 '15 at 12:22