SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 32
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    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...


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


    why do I get error,

    Code:
    callback is not defined.....
    I got that code from here, http://davidwalsh.name/jsonp
    (and http://coding.smashingmagazine.com/2...n-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...


    Code:
    $.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)
    	});

  2. #2
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    oh brother.. ok, changed one thing.....

    $.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)
    });


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

    now again get error....


    Code:
    callback is not defined


    thank you...

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    callback is not defined....

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




    thank you.....

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    the code is here...
    http://mayacove.com/dev/json/usersp.html
    (code I'm using from my localhost..)
    but it's not working...
    Some of the issues that I notice in that code are:

    What is nameOfJSOn and where is it defined?
    Code:
    $('body').prepend('<h1>' + nameOfJSOn + '<\/h1>');
    What is that variable called value? Should it be data?
    Code:
    $.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.
    Code:
    }); //  $.each(value)
    }); //  $.each(data)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Some of the issues that I notice in that code are:

    What is nameOfJSOn and where is it defined?
    Code:
    $('body').prepend('<h1>' + nameOfJSOn + '<\/h1>');

    What is that variable called value? Should it be data?
    Code:
    $.each(value, function (i, val) {

    both 'nameOfJSOn' & 'value' are defined here:

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


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

    right above this line:

    Code:
    $('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.
    Code:
    }); //  $.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.....

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Paul...

    JSONP:

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


    thank you.....

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...;-)



    thank you...

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    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???

    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:

    Code:
    {
        "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:

    Code:
    processData({
        "users": [
            ...
        ]
    })
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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......;-)

    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.....

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    users.php? where do you see that?????????
    That was an example, for the purpose of demonstration.

    Quote Originally Posted by maya90 View Post
    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... )
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
     callback is not defined....
    this one,
    http://mayacove.com/dev/json/flickr.html
    works from my localhost.....


    thank you...

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    get error:
    Code:
     callback is not defined....
    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:

    HTML Code:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I looked this up yesterday (is it tomorrow already?? :-) 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...ny&format=json)
    is not wrapped in that "callback" thing.....

    so am, let us say, mildly confused here? ;-)

    (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.....

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    I looked this up yesterday (is it tomorrow already?? :-) 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??)
    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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,265
    Mentioned
    33 Post(s)
    Tagged
    5 Thread(s)
    @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:
    Code JavaScript:
    $.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?

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fretburner View Post
    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:

    Code javascript:
    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:

    Code javascript:
    function handleJSON(data) {
        console.log(data);
    }
     
    $.ajax({
      dataType: 'jsonp',
      url: 'http://www.domain.com/somefile.php?callback=handleJSON'
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    792
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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......:-(

    oh well, I need to learn how to do this....
    ( 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...;-)
    I'm still missing something here....


    thank you.....

  21. #21
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,265
    Mentioned
    33 Post(s)
    Tagged
    5 Thread(s)
    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. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by maya90 View Post
    ( any other ways you can think of doing this? that may be, better or whatever?)
    There may be other ways to make things more complex, but you're not likely to find other simpler solutions.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fretburner View Post
    With maya90's flickr example, the server is being passed &jsoncallback=?. What happens when the callback is set to ? ?
    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.

    Quote Originally Posted by fretburner View Post
    With the flickr example, no callback function needs to be created manually, so does jquery do so automatically in this case?
    Here is how jQuery works out if it's a cross-domain call:

    Code:
    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))
        )
    );
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,265
    Mentioned
    33 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    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:
    Code:
    jQuery18308783239019103348_1372677192200({

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by fretburner View Post
    Right, so jQuery ignores that, detects if the request is cross-domain, and then adds its own callback code?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •