"Invalid Label" with jquery and jsonp (cross-domain)

Question

I'm trying to get data from a remote server using jsonp and i'm having some problems. first i had problems with the authentication issue but (i think) it's ok now. Anyways, i'm getting an "Invalid Label" Error on firebug when trying out my code which looks like that:

$(function() {
var url = 'http://lifeloopdev.info/get_events?callback=?';
    $.ajax(url, {  
        dataType: "jsonp",
        data: "offset=0&num_items=10",
        username: 'username',
        password: 'password',
        jsonp: 'successCallback'
    });  
});  

function successCallback(data) {  
    $.each(data.success, function(i,item){
        $("body").append('<h1>' + item.title + '</h1>');
    });
};

I've also tried it without the success function (instead of jsonp: 'successCallback'):

success: function(data) {  
        successCallback(data);
    }  

my json file:

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]}

It seems that the ajax function gets the data but having difficulties parsing it or something like that.

I'll be more then happy if you can help me with this, i spent the last 4 hours trying to figure it out with no success. Thank you very much for your time helping me.

Aviram.

Answer 1

I missed some stuff at first glance - where you've specified your JSON file, I thought you said your JSON response. The root of your problem is that the response must be of the form callbackFunctionName(jsonData). If it's not padded that way, you will get the invalid label error in Firebug since jQuery will try to interpret the response as a call to a function but there won't be any function name in the response.

Your usage of $.ajax() for the JSONP callback function is slightly incorrect right now and that's causing this issue. The value assigned to jsonp indicates the name of the query string parameter - this should match the parameter name that the server is expecting. In your case, it looks like the server is expecting the parameter name callback and not successCallback. It is not the string that will be used in the padded JSON recieved. jsonpCallback can specify the name of this function - that should be assigned the value of successCallback, if you'd like to use a named function and not the success function.

---

Assuming the server is expecting the callback function name in the query parameter named callback, your code should be one of the following:

1. By default jQuery will add callback=? when you don't specify a jsonp variable. Note the use of the success callback function in this code snippet. :

   $(function() {
       var url = 'http://lifeloopdev.info/get_events';
       $.ajax(url, {  
           dataType: "jsonp",
           data: "offset=0&num_items=10",
           username: 'username',
           password: 'password',
           success: function(data){
               $.each(data.success, function(i,item){
                   $("body").append('<h1>' + item.title + '</h1>');
               });
           }
       });  
   });  
   

   The URL that jQuery will attempt to GET will be http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=jQuery152035532653917078266_4305276802416. Note that the string callback is a query string parameter name and it's value has been autogenerated by jQuery - this will finally invoke your success function.

   The response should look like jQuery152035532653917078266_4305276802416({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

2. If you'd like to use a custom callback function name, see the code below:

   $(function() {
       var url = 'http://lifeloopdev.info/get_events';
       $.ajax(url, {  
           dataType: "jsonp",
           data: "offset=0&num_items=10",
           username: 'username',
           password: 'password',
           jsonpCallback: 'successCallback'
       });  
   });  
   
   function successCallback(data) {  
       $.each(data.success, function(i,item){
           $("body").append('<h1>' + item.title + '</h1>');
       });
   };
   

   In this case, the URL that jQuery will attempt to GET will be http://lifeloopdev.info/get_events?offset=0&num_items=10&callback=successCallback. A proper response will cause the function named successCallback to be invoked.

   In this case, the response should look like successCallback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]})

If your callback function query string parameter is not to be named callback but is something like cbfunc instead, you will need to add jsonp : 'cbfunc' to your $.ajax() call.

Answer 2

Are you actually padding your json response serverside to turn into jsonp? i.e. instead of json like:

{"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]}

you should be returning

callback({"success":[{"id":1,"title":"title 1"},{"id":2,"title":"title 2"},{"id":3,"title":"title 3"}]});

where "callback" is the value of the callback query string parameter passed to the server. Jquery automatically generates this unless you supply the jsonpCallback setting.

I also don't think you need to put the "?callback=?" in your URL, as I believe jquery adds this automatically.

Plus, jsonp: successCallback is telling Jquery to replace ?callback=? with successCallback - But I don't think this is what you're actually intending here. You probably DO want to use "success: function(data)..."

It may be worth having a careful read of the jquery documents on ajax and jsonp.