callback - Use of success / jsonpCallback with ajax request

Question

I'm developing an application for Netflix using their OData API. I've followed Stephen Walther's blog entry on how to query the OData API. In it, he uses the following code:

$.ajax({
   dataType: "jsonp",
   url: query,
   jsonpCallback: "callback",
   success: callback
}); 

In my application, I need to use the OData's paging links, to retrieve the full listings. My code is as follows:

// create url and handle ajax call to Netflix
  function getTitles() {
    query = "http://odata.netflix.com/v2/Catalog" // netflix odata base url
    + "/Genres('Television')" // select Genre
    + "/Titles" // top-level resource
    + "?$select=NetflixApiId,Name,BoxArt,Synopsis,ReleaseYear,AverageRating,Series" // choose fields 
    + "&$orderby=Name" // Sort results by name
    + "&$filter=Instant/Available eq true"  // filter by instant view
    + " and Type eq 'Season'" // select only seasons
    + "&$expand=Series" // include series data
    + "&$callback=callback" // specify name of callback function
    + "&$format=json"; // json request
    $.ajax({
      dataType: "jsonp",
      url: query,
      jsonpCallback: "callback",
      success: callback,
      error: function(XHR, textStatus, errorThrown){
        alert(textStatus + ":" + errorThrown);
      } 
    });
  }

// create seasons array and and repeat ajax call until all results are returned 
  function callback(result) {
    seasons = seasons.concat(result["d"]["results"]);
    if (typeof result["d"]["__next"] != 'undefined') {
      var urlJSONP = result["d"]["__next"] + "&$callback=callback&$format=json";
      $.ajax({
        dataType: "jsonp",
        url: urlJSONP,
        jsonpCallback: "callback",
        success: callback,
        error: function(XHR, textStatus, errorThrown){
          alert(textStatus + ":" + errorThrown);
        } 
      });
    } else {
      processResults();
    }
  }

However, when this runs I keep getting a parserError. It appears that the callback function is being called twice. If I remove the success: callback line, the application works fine. My question is: Is there a problem with leaving the success line of code from the ajax call? Or why would it be necessary to include both the jsonpCallback and success lines? I'm mainly asking this out of curiosity, because the application seems to work fine without both callback lines.

Answer 1

Don't define callback, because jQuery creates that function for you. Here's an example, jsFiddle:

function getTitles() {
    query = "http://odata.netflix.com/v2/Catalog" // netflix odata base url
    + "/Genres('Television')" // select Genre
    + "/Titles" // top-level resource
    + "?$select=NetflixApiId,Name,BoxArt,Synopsis,ReleaseYear,AverageRating,Series" // choose fields 
    + "&$orderby=Name" // Sort results by name
    + "&$filter=Instant/Available eq true"  // filter by instant view
    + " and Type eq 'Season'" // select only seasons
    + "&$expand=Series" // include series data
    + "&$callback=?" // specify name of callback function
    + "&$format=json"; // json request
    $.ajax({
      dataType: "jsonp",
      url: query,
      success: callback,
      error: function(XHR, textStatus, errorThrown){
        alert(textStatus + ":" + errorThrown);
      } 
    });
  }

callback=? basically asks jQuery to handle all the JSONP returns.