Using same callback for two ajax() request yields "parsererror" - javascript

So, I've been battling with Javascript for a little while now and I have a weird error which is probably something simple. I have an ajax request like so:
$.ajax({
url: 'http://www.hahaha.com/api/v3/acts',
crossDomain: true,
jsonpCallback: 'handlejson',
async: false,
jsonp: 'callback',
dataType: 'jsonp',
type: 'GET',
success: handleActs,
error: handleError
});
Which works fine and calls the callback with no problems. Now, if I add this request directly underneath:
$.ajax({
url: 'http://www.hahaha.com/api/v3/performances',
crossDomain: true,
async: false,
jsonpCallback: 'handlejson',
jsonp: 'callback',
dataType: 'jsonp',
type: 'GET',
success: handlePerformances,
error: handleError
});
I get a "parsererror" on the first request and the second one succeeds. Anyone have any ideas as to why it's doing this? Can a jsonpCallback only have one request called on it?

I don't think it works to have two AJAX calls referring to the same jsonpCallback - I think jQuery puts a callback function in the global namespace, then removes it when it's called - so it won't be around for the second set of loaded data. I wouldn't have thought this would matter with async set to false, but it looks like it does.
At first I couldn't figure out why you were setting jsonpCallback at all, but testing seems to indicate that the API you're using strips anything other than [a-z] from the callback name :(. So you might try this with jsonpCallback set to 'handlejsona' in the first call and 'handlejsonb' in the second call.
This approach seems to work here: http://jsfiddle.net/nrabinowitz/H7zYt/

Related

JQuery Ajax only calls predefined function

I have the following JQuery Ajax method:
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData,
dataType: 'json',
success: function() {
$('#test').html("testing123");
},
});
As it is written, the success function does not fire.
However, if I predefine the function somewhere else and then call it like this:
success: testFunction()
OR
success: $('#test').html("testing123")
then it works.
What am I missing?
The solutions that you think you have working are actually only illusions of so. They are actually not being called on success, but right when you declare it. This leads me to think that your ajax call is not returning success.
The right way to predefine a function and pass it would be
success: testFunction
If you do success: testFunction(), you are running that function right away when parsing the code and not when the callback from your ajax fires. This is the same case with
success: $('#test').html("testing123")
and is actually equivalent if you called testFunction() right after your ajax call.

Script5007 error "object not found" only on Internet Explorer

When I first load a page I make an ajax call to bring some data for the client-side. The call is made to a different domain and the answer comes as JSONP. The call looks similar to:
$.ajax({
type: "GET",
url: url + "?callback=?",
dataType: "jsonp",
contentType: "application/javascript;charset=UTF-8",
async: true,
success: successCallback,
error: errorCallback,
cache: true,
jsonpCallback: jsonCB
});
'application/javascript' would be the possible culprit here as I did my research on the subject but this is present in a previous version of the code which never had this problem.
On all browsers except IE I receive the following error (sometimes, usually the first time and then the problem dissappears) :
script5007 object not found - line 1, char 1
The JSONP received looks like that:
func({"result":"abc"})
The param of the func is a valid JSON as I checked this using jslint.
Any idea will be highly appreciated! Thank you!
You're missing the object brackets { } inside your $.ajax function. Modify it like so:
$.ajax({
url:'',
contentType: 'application/javascript;charset=UTF-8',
crossDomain:true
......
});
The jQuery $.ajax method either takes a url parameter and an optional parameter of additional options specified as an object, or an object parameter including the url.

JQuery AJAX call, IE9 issues with JSON

JSFiddle: http://jsfiddle.net/D2s2M/1/
I cannot figure out why this does not work in IE9. I've seen other questions here on Stack with similar issues, none of which have solutions that seem fix my problem.
This issue is specific to IE9, it does work in FF and Chrome. However, I am seeing some oddities in Chrome that do not make sense: if I append the contentType:'application/json' inside of the attributes, it breaks functionality inside of Chrome.
Here is the code that is in fiddle:
$('document').ready(function(){
$.ajax({
dataType: 'json',
type:'GET',
url: 'https://freegeoip.net/json/?callback=',
//contentType: 'application/json',
success: function(response, status, xhr){
var ct = xhr.getResponseHeader("content-type") || "";
$('#text').text(ct);
},
error: function(a,b,c) {
$('#text').text('Error: '+' '+b+' '+c);
},
timeout: 3000
});
});
Thanks
Change
dataType: 'json',
to
dataType: 'jsonp',
Solution: http://jsfiddle.net/D2s2M/2/
I'm not precisely sure why this cross-domain issue was IE specific nevertheless, JSONP did lead to resolving the issue.
The service I'm using does support JSONP, in the url there is a querystring variable to specify the name of the callback you wish to use. (JSONP requires that the data either be wrapped in a callback inside of the file itself, or set and passed an object inside of the JSON file.. this is required because JSONP loads everything in the head of the DOM to bypass cross-domain restrictions).
Revised Code:
$('document').ready(function(){
$.ajax({
dataType: 'jsonp',
type:'GET',
url: 'https://freegeoip.net/json/?callback=func',
contentType: 'application/json',
async: false,
jsonpCallback: 'func',
success: function(data){
console.log(data);
},
error: function(a,b,c) {
$('#text').text('Error: '+' '+b+' '+c);
},
timeout: 3000
});
});

ReferenceError: jsonp not defined

So I am making an ajax request in jquery like this:
$.ajax({
url: url,
dataType: "jsonp",
jsonpCallback: 'callback',
success: function(data) {
alert(data.success);
}
});
This is what I want to receive from the url:
jsonp({
"success": true,
}
)
But I keep getting this error - ReferenceError: jsonp is not defined
what am I doing wrong ?
Thanks.
P.S: Testing on FF
After a whie I got the solution:
instead of setting the jsonCallback : "callback" I changed it to
jsonCallback: "jsonp"
Because that is the default callback my proxy returns.
I was getting "jsoncallback is not defined " message in a cross domain ajax call.
After a lot of search I found like adding
jsonpCallback: 'jsonCallback'
gave me response as an object.

jQuery ajax jsonp call always get unexpected token error

I've been wasting a great deal of time for something I think is so simple, yet there are no good examples that illustrate how and what the ajax call is doing.
This is my javascript code:
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/timezone/json',
dataType: 'jsonp',
data: {
location: myLoc,
timestamp: myTime,
sensor: true
},
success: function(){alert('OK');},
error: function(){alert('FAIL');}
})
}
The variables "myLoc" and "myTime" are not the problem. In fact if I cut and paste the URI into my browser it works just fine and shows the data: https://maps.googleapis.com/maps/api/timezone/json?callback=jQuery18307430207263678312_1354817349576&location=36.7468422%2C-119.7725868&timestamp=1354817353&sensor=true&_=1354817353398
From what i've been reading, the "callback" parameter is automagically generated and somehow the code should be smart enough to call the success function or error function.
The error that chrome returns is "Uncaught syntax error unexpected token ':'"
The javascript code always calls the error function no matter what I try. I added a jsonpCallback parameter (didn't work), json parameter (didn't work), changed dataType to "json" (didn't work due to cross domain error).
Please help.
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/timezone/json',
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
data: JSON.Stringify({
location: myLoc,
timestamp: myTime,
sensor: true
}),
success: function(){alert('OK');},
error: function(){alert('FAIL');}
});

Categories