jquery: ajax call to get jsonp does not call function

Question

I am having trouble getting my code to run in a callback using the ajax call from the jquery library. The code looks like:

function processJSONDirectoryFile(jsonData) {
        finished = false;
        for (var i = 0; i < jsonData.length; i++) {
                processJSONCountryFile(jsonData[i]);
        }
        finished = true;
}

function getJSON() {
  //snip

  $.ajax({url:      'http://example.org/api/rest/something',
          data:      {},
          dataType: 'jsonp',
          timeout:  10000,
          jsonp: "callback",
          jsonpCallback:  "processJSONDirectoryFile",
          });
  //snip
}

I have checked I can load http://example.org/api/rest/something?callback=myfunc and that works as expected. I am using firebug to set break points in this code. The ajax call breakpoint is hit, but the breakpoint inside processJSONDirectoryFile is never hit.

I should also mention I am using jsonp as my code runs on a different domain to example.org so I need to use jsonp to get around the domain control stuff.

Am I making some obvious mistake?

Answer 1

I believe you should unquote the function and pass it by reference:

$.ajax({ url: 'http://example.org/api/rest/something',
  // This empty data parameter probably isn't necessary.
  data: {},
  dataType: 'jsonp',
  timeout: 10000,
  jsonp: "callback",
  jsonpCallback: processJSONDirectoryFile,
});

Also, this should be equivalent, if you prefer a more consistent $.ajax() syntax:

$.ajax({
  url: 'http://example.org/api/rest/something?callback=?',
  dataType: 'jsonp',
  timeout: 10000,
  success: processJSONDirectoryFile
});

By convention, jQuery will inject its randomly generated callback function name for the value of the callback key in the querystring. So, everything's automatically "wired up" transparently.