JSONP: callback is not defined

I can’t post a url b/c can’t post real json url… so here’s my code with a dummy url…

$.getJSON("http://dummySubdomain.domain.com/movies.json?callback", function(json) {
		 console.log(json);
	});

why do I get error,

callback is not defined.....

I got that code from here, http://davidwalsh.name/jsonp
(and http://coding.smashingmagazine.com/2012/02/09/beginners-guide-jquery-based-json-api-clients/ )

I don’t have that problem here…

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

(I used “jsoncallback” here, instead of just “callback” did this a few years ago, I don’t remember why…
(I tried using just “callback” on this flickr page… but then nothing prints… (but I don’t get error… oh brother… I love JSON…)

thank you…

PS: sorry, I need to change this… not getting error anymore, but nothing prints… (oh man…)
the json url is correct as I can load it directly on the browser and see the content…

this is my code now…

$.getJSON("http://dummySubdomain.domain.com/movies.json?callback", function(json) {
		 console.log(json);
		 $('div').html('json:  '  + json); // this line does not get executed at all, nothing prints (neither does the console.log()  but I don't get any errors)
	});

oh brother… ok, changed one thing…

$.getJSON(“http://dummySubdomain.domain.com/movies.json?callback[B]=?[/B]”, function(json) {
console.log(json);
$(‘div’).html('json: ’ + json); // this line does not get executed at all, nothing prints (neither does the console.log() but I don’t get any errors)
});

(added ‘=?’ after ‘callback’ (wanted to highlight this, but can’t find how to change font color here…)

now again get error…

callback is not defined

thank you…

I’m still struggling w/this JSONP thingie…

here is example with ‘local’ json
http://mayacove.com/dev/json/users.html
which works fine…

from my localhost am trying to do JSONP with this url
http://mayacove.com/dev/json/json/usersp.json
the code is here…
http://mayacove.com/dev/json/usersp.html
(code I’m using from my localhost…)
but it’s not working…

get error:

callback is not defined....

how come I don’t have that problem here??
http://mayacove.com/dev/json/flickr.html

thank you…

Some of the issues that I notice in that code are:

What is nameOfJSOn and where is it defined?

$('body').prepend('<h1>' + nameOfJSOn + '<\\/h1>');

What is that variable called value? Should it be data?

$.each(value, function (i, val) {

You’re closing off $.each for both value and for data - when you only open it fr one of them. One of these two is superfluous and is messing up your structure.

}); //  $.each(value)
}); //  $.each(data)

both ‘nameOfJSOn’ & ‘value’ are defined here:

 $.each(data,function(nameOfJSOn,value) {  

first loop inside getJSON() method… (line 47)

right above this line:

$('body').prepend('<h1>' + nameOfJSOn + '<\\/h1>');

You’re closing off $.each for both value and for data - when you only open it fr one of them. One of these two is superfluous and is messing up your structure.

}); //  $.each(value)
}); //  $.each(data)

what? wouldn’t I be getting syntax error?
I’m using the same method as here,
http://mayacove.com/dev/json/users.html
(only diff is this one is JSONP…)

also, have another JSONP here,
http://mayacove.com/dev/json/flickr.html
that works fine… what is the difference with this one?

thank you very much…

You’re right, my fat fingers cut a line too much on my tablet, when cutting out all of the blank lines for which to better see things.

Nothing seems to be wrong with that code - can you show us an example of the JSONP call that you are doing that is resulting in your error?

thank you Paul…

JSONP:

http://mayacove.com/dev/json/json/usersp.json

thank you…

That doesn’t seem to be valid JSON code - what should happen instead is that a URL is called with ?callback=someFunctionName, and that callback name is then wrapped around the JSON data.
See for example the code demonstrating this at https://gist.github.com/cowboy/1200708

oh brother… I don’t get this…
it’s the same as what I have here:
http://mayacove.com/dev/json/json/users.json

that I grab “locally” from
http://mayacove.com/dev/json/users.html

aren’t you supposed to wrap it in that “callback” thingie for JSONP???

(JSON syntax is correct… it validates in Lint… (as long as it’s not wrapped in the “callback” thing…:wink:

thank you…

The JSON data is supposed to remain as data. The service that you request the data from (a .php file, or something else) is what wraps the callback function around the data.

Here’s an example.

You make a JSON request to domain.com/users.php - the users.php file creates the JSON data, or retrieves it from somewhere else, and echo’s out the following:


{
    "users": [
        ...
    ]
}

When you make a JSONP request to domain.com/users.php?callback=processData - the users.php file creates the JSON data, or retrieves it from somewhere else, just as above. It then uses the callback information from the URL, and wrapsthat name as a function call around the JSON data, so that the users.php file ends up outputting:


processData({
    "users": [
        ...
    ]
})

I should also mention, that because you are requesting the JSON data from the same domain that you are on, that you have no need to use JSONP. The reason for using that is as a security work-around, for when you are attempting to obtain JSON data from a domain that is different from yours.

Paul,

users.php? where do you see that???

there’s no back-end involved here at all…
(this is running in my Tomcat, but the request for the JSON content is just the url to the JSONP… that’s it…:wink:

again, how come it works fine here?
http://mayacove.com/dev/json/flickr.html

and not in my other example?

as for how I grab the content in the JSON, I do it exactly the same way as I do here,
http://mayacove.com/dev/json/users.html

which works fine… everything here is exactly the same except for the url to the JSON…
(one is regular JSON, other one JSONP wrapped in “callback” thing… )

thank you…

That was an example, for the purpose of demonstration.

May I ask, why are you experimenting with JSONP when you currently have no reason to use it? I suggest that you stick with JSON and leave JSONP until you have the time and/or patience to learn more fully about it.

to answer your question about the domain:

when I run usersp.html in my localhost (Tomcat) I’m not in the same domain, right?

I’m posting usersp.html just so you see the code,
but in reality it needs to work in my localhost… and it’s not…

again, get error:

 callback is not defined....  

this one,
http://mayacove.com/dev/json/flickr.html
works from my localhost…

thank you…

Ahh, okay. What happens with JSONP is that the result is placed inside of a script tag on your page, so that it ends up being:

<script>callback(...)</script>

Do you have a function called callback, that you have setup to handle that JSON data? If not, then that I presume is what the error message is referring to.

I looked this up yesterday (is it tomorrow already?? :slight_smile: lol…)

and saw many entries in Stackoverflow… I find this confusing…

so: I have to write a fn called “callback” in my <script> tag
(can’t do unobtrusive??)
and run what code in it ???

and:

how come I don’t need any of this here?
http://mayacove.com/dev/json/flickr.html
(again, this one pulls the content fine in my localhost…)

on the other hand, the JSON for this one,
(http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json)
is not wrapped in that “callback” thing…

so am, let us say, mildly confused here? :wink:

(but for what I need to do in my situation with JSONP right now, the JSON being provided to me remotely is wrapped in that “callback” thing, so I have to work with that…)

ok, is this confusing enough now? :~))

thank you very much for your help…

PS: ok, I see, I have to do the callback fn thing you say because the JSONP I’m pulling from is wrapped in that callback thing, right?

ok, thank you very much…

That is correct. Because you are attempting to retrieve the JSON content from another domain, the web browser does not allow that to happen as a normal JSON request. So instead, that data must be wrapped in a function call and plonked in to a <script> tag. The browser will then run that function, passing that JSON data to the function.

So if it was not callback(…) but instead doStuffWithData(…), your error message may-well instead say:

doStuffWithData is not defined…

For which you would need to have previously defined a function, such as:


function doStuffWithData(data) {
    // do stuff with data in here
}

So I suggest that you do that with that callback function name that you have in your file.

@paul_wilkins - I was playing around with the code that maya90 shared last night and trying to solve that ‘callback in not defined’ error. In the end, I discovered that you can get around the fixed callback function with jQuery, but it seems a bit clunky:

$.ajax({
    url: 'http://mayacove.com/dev/json/json/usersp.json',
    dataType: "jsonp",
    type: "GET",
    cache: true,
    jsonp: false,
    jsonpCallback: "callback",
    success: function(data){
        console.log(data);
    }
});

so the only other way would be to create your own function with the same name as the callback?

Yep, something as simple as this would do:


function callback(data) {
    console.log(data);
}

$.ajax({
  dataType: 'jsonp',
  url: 'http://mayacove.com/dev/json/json/usersp.json'
});

Or if the page you’re your requesting it from is capable of dealing with the proper callback notation, something like this:


function handleJSON(data) {
    console.log(data);
}

$.ajax({
  dataType: 'jsonp',
  url: 'http://www.domain.com/somefile.php?callback=handleJSON'
});

so I think I have to redo my entire code for

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

to something like the response here, maybe
http://mayacove.com/dev/json/users.html

all because of the JSONP I’m pulling from is wrapped in a “callback()” method…

oh man, this is grand…:frowning:

oh well, I need to learn how to do this…:wink:
( any other ways you can think of doing this? that may be, better or whatever?)

so everything that I now have in getJSON() method has to go into a function that I call when the page loads?
doesn’t seem too different from calling getJSON() onload…:wink:
I’m still missing something here…

thank you…