Question

I am having some problem with jsonp and jquery.

This is my code –

var myCallback = function(data) {
  console.log(data);
};

$.ajax({
  url: my_url,
  type: 'GET',
  dataType: 'jsonp',
  jsonp: 'callback',
  jsonpCallback: 'myCallback'
});

jQuery adds something like ?callback=myCallback&_=1340513330866 to my_url and the data returned from my_url is myCallback('abcd') – although in reality it will be returning some HTML code instead of the abcd.

Problem: abcd is not logged in console through myCallback. So what am i doing wrong ? I was under the impression that the data returned will be executed as it is inside script tags ?

Answer 1

If you use your own function, then you have to explicitly declare it as global. For example:

window.myCallback = function(data) {
  console.log(data);
};

DEMO

---

Explanation

Every function that should be called in response to a successful JSONP request must be global. jQuery is doing this as well. This is because JSONP is nothing else than including a (dynamically generated (most of the time)) JavaScript file with a <script> tag, which only contains a function call. Since each script is evaluated in global scope, the function that is called must be global as well.