Question

I am trying to develop a mobile application using JQUERY mobile. For its data, my app needs to accesses an existing service that returns a JSON object.

    $.ajax({
            url: 'http://pruebanico.comze.com/prueba2.json',     
            dataType: 'text',    
            jsonp: 'jsoncallback', 
            timeout: 5000,     
            success: function(json, status){

            alert (json);
            });

When executing this piece of code, an undefined error is displayed.

Having a closer look at the result of the returned page in Firebug, it seems to be that everything is OK json-wise

 {"totalResultsCount":0,"geonames":[]}

What can be the problem of the undefined error?

Answer 1

The first problem is that you’ve got a syntax error. You haven’t closed the same amount of parentheses/braces as you opened. It should be this:

$.ajax({
    url: 'http://pruebanico.comze.com/prueba2.json',
    dataType: 'text',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(json, status) {
        alert(json);
    }
});​

The second problem seems to be that your server doesn’t return JSONP but just plain JSON, which results in a cross-origin exception.

You need to fix your server code to instead return something like

jsoncallback({"totalResultsCount":0,"geonames":[]})

OR

Implement CORS (cross-origin resource sharing) on your server, but note that the current releases of Opera and Internet Explorer don’t yet support the standard version of CORS. (IE has its own XDomainRequest object but it’s different to the CORS standard. The next release of both browsers will ship with standard CORS support though.)