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.