Question

I’m trying to use jQuery-jsonp plugin with jQuery Deferred Objects but I’m having no luck so far.

The goal is to call an API, retrieve data and elaborate them. Since I’m using the same call to retrieve and elaborate different sets of data for different purposes, I structured my code this way to avoid explicitly repeating the same API call in each elaborating function:

function callAPI(){
  return $getJSON(url);
}

function doStuff1(){
  $.when(callAPI)
  .then(function(data){
    //get the data and elaborate them for purpose #1
  })
}

function doStuff2(){
  $.when(callAPI)
  .then(function(data){
    //get a different set of data from same API
    // and elaborate them for purpose #2
  })
}

Problem is, I tried the same approach substituting $.getJSON() with $.jsonp() from Julian Aubourg’s plugin (http://code.google.com/p/jquery-jsonp/) but the deferring doesn’t work.

I have a few restrictions on this and can’t change them:

*API calls must use JSONP.

*I must be able to detect errors (no matter what kind), hence the use of jQuery-jsonp plugin, the only solution I found so far.

I studied jQuery Deferred Object, searched jQuery forums, Stackoverflow and the depths of the web, and read everything on the plugin page. I tried several approaches, but none has worked so far (it’s as if the deferred wasn’t even there).
My hypothesis is that the deferreds don’t work with jquery-jsonp plugin because of its structure (which is what allows it to catch errors), and because $.jsonp is not a deferred itself like $.ajax is, but I’m in no way an expert so I need some advice from this splendid community.

One solution I found, and it works for me, is to pass a function as a parameter to the callAPI function, so on success it can execute what I need without repeating myself.

So my callAPI function would be changed like this:

function callAPI(func){
 $.jsonp({
   "url": url,
   "success": function(data) {
     func();
   },
   "error": function(d,msg) {
    //show error message
   }
 })
}

callAPI(doStuff1);
//or
callAPI(doStuff2);

But, since the error management necessity came out late in the development stage and I, being a newbie, didn’t think about it earlier, this would mean rewriting a whole bunch of code. So if someone managed to use deferreds with jquery-jsonp plugin, that would be great to know.

Thank you all.

Flavia

Answer 1

I think this is what you want. You have to map jQuery-jsonp’s internal api to calling methods on the deferred object.

function callAPI(url){
  return $.Deferred(function(dfd) {
    $.jsonp({
      url: url
      ,success: dfd.resolve
      ,error: dfd.reject
      ,complete: dfd.always
    });
  }).promise();
}

Then you should be able to use

$.when(callAPI('url #1'), callAPI('url #2'))
  .done(function(response1, response2) {
    // each response will be [ json , STR_SUCCESS ] based on Jquery-jsonp's API
    var json1 = response1[0];
    ...
  })
  .error(function(error1, error2) {
    // each response will be [ xOptions , type ] based on Jquery-jsonp's API
    ...
  })
;