How to wait for an async call from a callback using jQuery?

Question

I'm using the select2 jQuery based replacement for combo boxes, and I have to define a callback to process the data I receive from a json rest web service.

The problem is that, in the same callback, I have to issue another GET request to get the total numbers of matching records, so that select2 can decide if it has to load more results (it has an infinite scroll feature)

The code is something like this:

$("#country").select2({
 ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
 url: 'http://localhost:9000/api/countries',
 dataType: 'json',
 data: function(term, page) {
 return {
 filter: term,
 page: page,
 len: 10
 };
 },
 results: function(data, page) {
 return {
 results: data, more: ????
 };
 }
 }
});

The problem is I don't know how to issue an async request (I'm issuing a cross-domain request, and the docs says async is not supported in that case) and wait for it to finish before returning form the results callback.

The example from select2 page is like this:

results: function (data, page) {
 var more = (page * 10) < data.total; // whether or not there are more results available
 // notice we return the value of more so Select2 knows if more results can be loaded
 return {results: data.movies, more: more};
}

The problem is that my web service returns the total number of records from a different endpoint, so I have to make another request, like this: http: //localhost:9000/api/countries?filter=term

any idea?

Answer 1

You can't wait for an async callback in javascript. You have to restructure your code to do all future work based on the async response from the actual callback.

If you need to make multiple consecutive ajax calls, then you issue the first one and in the success handler or response handler for the first ajax call, you issue the second ajax call and in the response handler for the second one, you carry out whatever you want to do with the data.

If see that you're using the .select2() framework. In the framework, the results callback is where the ajax call returns. It would be in that function that you would issue the second ajax call using normal jQuery ajax calls and in the success handler from that second ajax call, you would carry out whatever you're trying to do with the eventual data you got back. You won't be able to use the normal return value of the results callback because you won't have your final data yet at the point you need to return. I think this is just a limitation of .select2() in that it only supports a single ajax call. It just means you can't use a little bit of the built-in behavior and have to apply the result yourself with your own code, but it doesn't mean you have to throw out .select2() for everything else you were using it for.

It looks like you might want to just hook the change event directly and not use their built-in ajax stuff since it doesn't look like it really provides you with much if you need two serialized ajax calls.

• opensas: I understand what you mean, and was afraid that it would be the only answer to my question (+1 for being sincere :-). The problem is I can't control what select2 does (not whithout forking it, I mean...) Can you think of any other way to achieve it with the given situation?
• jfriend00: @opensas - If the problem you are trying to solve is how to do two consecutive ajax calls while using .select2, I've added that to the end of my answer.
• opensas: great answer jfriend00, I'll have a look at select2 code to see if I can manage to get away with the two serialized ajax calls, in the meantime I made it work with a synchronous request... see my own answer...

Answer 2

I studied the source code on select2, and finnally came out with this solution

var ajax = {
 url: 'http://localhost:9000/api/countries',
 len: 3,
};
$("#country").select2({
 query: function(options) {
 var data = {
 filter: options.term,
 page: options.page,
 len: ajax.len
 };
 $.ajax({
 url: ajax.url,
 data: data,
 dataType: 'json',
 type: 'GET',
 success: function(data) {
 $.ajax({
 url: ajax.url + '/count',
 data: { filter: options.term },
 dataype: 'json',
 success: function(resp) {
 var total = parseInt(resp, 10);
 var more = (options.page * ajax.len) < total;
 options.callback({results: data, more: more});
 }
 });
 }
 });
 },
});

As you can see, when te first fetch (ajax.url) completes I issue another request (ajax.url + '/count') and only when this second request completes I call options.callback, efectively serializing both ajax calls...

In fact the ajax function from select2 has more functionality, such as throttling and dropping out-of-order responses, I just ported them too, but I left them out of this response in order not to complicate the example...

Answer 3

In addition to jfriend00's answer (which is excellent, BTW) I found the followgin workaround, which is basically to issue the request synchronously, which in spite jquery docs it seemd to work (at least with chromium 18.0 and jquery 1.8.0)

I'm just posting it in case anybody find it useful...

var config = {
 url: 'http://localhost:9000/api/countries',
 len: 20,
 term: ''
}
$("#country").select2({
 ajax: { 
 url: config.url,
 dataType: 'json',
 data: function(term, page) {
 config.term = term;
 return {
 filter: term,
 page: page,
 len: config.len
 };
 },
 results: function(data, page) { // parse the results into the format expected by Select2.
 var more = false;
 $.ajax({
 url: config.url + '/count',
 data: { filter: config.term },
 cache: false,
 async: false,
 success: function(resp) {
 var total = parseInt(resp, 10);
 more = (page * config.len) < total;
 },
 async:false
 });
 return {
 results: data, more: more
 };
 }
 }
});

• jfriend00: aysnc:false is really pretty unfriendly to the user. It locks up the browser (it won't respond to any UI interactions) until the ajax call completes. It's heavily discouraged and is pretty much never the best way for your user interaction to work. I get that it's a work-around here, but you really ought to work out a better long term design.
• opensas: please, have a look at my new answer ;-)