CODEWITHSUNDEEP
javascriptjqueryajaxjsonp
sumone4life
sumone4life

Reputation: 113

Having problems with jQuery, ajax and jsonp

I am using jsonp and ajax to query a web-service written in java on another server. I am using the following jquery command:

$.ajax({
    type: "GET",
    url: wsUrl,
    data: {},
    dataType: "jsonp",
    complete: sites_return,
    crossDomain: true,
    jsonpCallback: "sites_return"
});


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

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

So my problem is that after the query finishes a function called jsonp_callback is called. Where I can clearly see the json formatted string:

{"listEntries":["ELEM1", "ELEM2", "ELEM3", etc...]}

But after the function sites_return is called when the complete event fires, I get the the following:

Object { readyState=4, status=200, statusText="parsererror"}

Also for reference the jsonp_callback function is called before the sites_return function. Also if i take the jsonp_callback function out of the code, I get a complaint it firebug that the function is not implemented.

My question three fold: 1) What am i doing wrong on the jquery side? 2) Why does the json get parsed correctly in jsonp_callback but not sites_return? 3) What can i do to fix these issues?

EDIT

Some new development. Per the comments here is some additional information.

The following is what comes out of the http response 

jsonp_callback({"listEntries":["ELEM1", "ELEM2", "ELEM3"]})

I assume this is the reason jsonp_callback is being called. I guess my question now becomes, is there any way to control this (assuming i don't have access to the back end web-service).

Upvotes: 5

Views: 3199

Answers (4)

Jinbom Heo
Jinbom Heo

Reputation: 7400

Hope this helps~

var url = "http://maps.google.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&sensor=false";
var address = "1600+Amphitheatre+Parkway";
var apiKey = "+Mountain+View,+CA";

$.getJSON("http://maps.google.com/maps/geo?q="+ address+"&key="+apiKey+"&sensor=false&output=json&callback=?",
  function(data, textStatus){
     console.log(data);
  });

Upvotes: 2

Dave Ward
Dave Ward

Reputation: 60570

If you don't have the ability to change the JSONP function wrapper that the remote server returns, jQuery's $.ajax() may be overkill here. Ultimately, all you're doing is injecting a script reference to wsUrl, which makes a call to jsonp_callback with a JavaScript object literal as its input parameter.

You could just as easily do something like this and avoid the confusion around the callback naming/syntax:

$.getScript(wsUrl);

function jsonp_callback(response) {
  // Access the array here via response.listEntries
}

Upvotes: 0

Pointy
Pointy

Reputation: 413996

I think that the problem is that your server is not behaving the way jQuery expects it to. The JSONP "protocol" is not very stable, but generally what's supposed to happen is that the site should look for the "callback" parameter and use that as the function name when it builds the JSONP response. It looks as if your server always uses the function name "jsonp_callback".

It might work to tell jQuery that your callback is "jsonp_callback" directly:

$.ajax({
    type: "GET",
    url: wsUrl,
    data: {},
    dataType: "jsonp",
    complete: sites_return,
    crossDomain: true,
    jsonpCallback: "jsonp_callback"
});

Not 100% sure however.

Upvotes: 1

sv_in
sv_in

Reputation: 14049

I believe that the first argument to the sites_return function would be the jqXHR Object. Instead of complete try using success.

But still this may not work as it seems that there is a parsing error (mentioned in the return value of sites_return function called from oncomplete). Therefore, you would first need to check your json string.

To Validate JSON, you can use http://jsonlint.com/

Upvotes: 1

Related Questions