JSONP: callback is not defined

JavaScript
21

With maya90’s flickr example, the server is being passed &jsoncallback=?. What happens when the callback is set to ? ? With the flickr example, no callback function needs to be created manually, so does jquery do so automatically in this case?

22

There may be other ways to make things more complex, but you’re not likely to find other simpler solutions.

23

The ? is not a valid function character for a function name, so you end up with an unusable response that is wrapped with parenthesis but with no function name at the start.

Here is how jQuery works out if it’s a cross-domain call:

s.crossDomain = !!(parts &&
    (parts[1] != ajaxLocParts[1] ||
        parts[2] != ajaxLocParts[2] ||
        (parts[3] || (parts[1] === "http:" ? 80 : 443)) != (ajaxLocParts[3] || (ajaxLocParts[1] === "http:" ? 80 : 443))
    )
);
24

Right, so jQuery ignores that, detects if the request is cross-domain, and then adds its own callback code? The response from flickr in this case begins like this:

jQuery18308783239019103348_1372677192200({
25

Yep, I’d say that jQuery adds its own callback on when a non-valid one is detected. It helps to make things nice and stable.

26

ok, here is my attempt at dealing with this “callback” issue:

http://mayacove.com/dev/json/userspc.html
(again, this needs to work in my localhost, where it’s a remote domain, am just posting here to show my code… and it’s not working in my localhost…)

in localhost get exactly same error as you get when you run it in above url…

I’m using the first approach Paul posted, as I’m not connecting to any back-end…

is the callback fn called automatically onload?

or do I have to call it onload (inside document.ready() thingie?)

still confused about this…

27

The JSONP code that you fetch does that call for you. You do not need to run the callback function yourself.

[/QUOTE]

The callback function needs to be available from the global scope, so it needs to be defined outside of the document.ready function.

28

oh my gosh, I finally got it!!

http://mayacove.com/dev/json/userspc.html

this works in my localhost now…:slight_smile:

I finally got it when read here
http://stackoverflow.com/questions/4528104/javascript-jsonp-callback-function-not-defined

JSON-P is added to the document using a script element, so the function call inside it has to reference a function that exists in the global scope.

meaning: it literraly adds:



<script type="text/javascript">

  callback(

	{"users":[
			{
				"firstName":"Ray",
				"lastName":"Villalobos",
				"joined": {
					"month":"January",
					"day":12,
					"year":2012
				}
			},
			{
				"firstName":"John",
				"lastName":"Jones",
				"joined": {
					"month":"April",
					"day":28,
					"year":2010
				}
			}
	]}
	
	
	
	
);
</script>

to your <head> element…

lol… it’s kind of funky (like so many things JS…:wink:

it adds a call to the callback fn wrapped in a <script> tag in your <head> and passes it the entire JSON you’re grabbing from a remote domain…
(the “JSON” is just a fn call to which the JSON is passed…lol… what is actually passed to the callback fn is technically just a regular JS object, right?)

(now I don’t understand how the Flicker one works…:wink:
(funny, if I use just ‘callback’ in that one in url instead of ‘jsconcallback’ it doesn’t work… but I don’t see how ‘jsoncallback’ is defined anywhere…)

ok, finally… thank you SO MUCH…

I learned so much with your help…:slight_smile:

29

oh my gosh… this is weird…

I added ‘success’ & ‘error’ properties to the $.ajax fn, and it’s printing FAIL!!
in my localhost too… (???)

http://mayacove.com/dev/json/userspc.html

WTF??

thank you…

30

Your page that contains the JSON data is failing to respond properly. jQuery expects the callback to be that which it requested, in this case the request is for:

http://mayacove.com/dev/json/json/usersp.json?callback=jQuery18307146045416593552_1372682088982&_=1372682088990

So when jQuery doesn’t receive JSONP that is wrapped with the callback function name, that is an error, and is considered to be a fail.

If you want the success/fail stuff to work properly, you will need to follow the proper procedures. Otherwise just ignore it.

31

oh man… (sigh…:wink: ok…

(didn’t I say ‘funky’?? :slight_smile:

again, thank you very much for your help…

32

I should mention, that you can force jQuery to not use its own JSONP callback name, so that you can tell jQuery of the name that you want to use instead. This will result in it properly detecting a success situation for you.

For example:


var callbackName = 'callback';

$.ajax({
    dataType: 'jsonp',
    jsonp: false,
    jsonpCallback: callbackName,
    url: 'http://mayacove.com/dev/json/json/usersp.json?callback=' + encodeURIComponent(callbackName),
    success: ...,
    fail: ...
});

The jsonp:false tells jQuery to not add its own callback parameter on to the url, and jsonpCallback is where you tell jQuery the name of the callback that you are using instead.

I’ve put the callback name in to a variable, so that it’s not being duplicated in different places, and the encodeURIComponent part is just a standard safety precaution.