JSONP Ajax calls not working parallel - javascript

I have Node.js server and jQuery ajax requests.
This works:
api(config.categoriesURL, success, config.err1);
setTimeout(function () {
api(config.randomURL, success1, config.err2);
},300);
But this doesn't:
api(config.categoriesURL, success, config.err1);
api(config.randomURL, success1, config.err2);
Here is the console output:
url: http://localhost:3000/categories/?callback=myCallback&_=1431726147454
url: http://localhost:3000/random/?callback=myCallback&category=55564cc42e366b34aa9a529d&callback=myCallback&_=1431726147455
responseText: undefined
status: 200
text status: parsererror
error: Error: myCallback was not called'
Is this server-side or client-side problem? Any idea why this is happening and how I should solve it? Is this normal behaviour?
Here is more code:
main.js
$(document).ready(function() {
var api = require('./api'),
config = require('./config');
function success (data) {
data.forEach(function (category) {
var div = document.createElement('div');
div.id = category._id;
div.textContent = category.name;
$('.container').append(div);
});
}
function success2 (data) {
console.log(data);
}
api(config.categoriesURL, success, config.err1);
api(config.randomURL, success2, config.err2);
});
api.js
function api(url, success, error) {
$.ajax({
type: 'GET',
url: url,
beforeSend: function (jqXHR, settings) {
console.log('url: ' + settings.url);
},
jsonpCallback: 'myCallback',
dataType: 'jsonp',
success: success,
error: error
});
}
module.exports = api;

You should try removing:
jsonpCallback: 'myCallback',
You are making two simultaneous JSONP ajax calls that use the same name for the callback function. I would think that would be a problem.
If you remove the jsonpCallback setting, jQuery will randomly generate the name of the callback function.

Related

When using AJAX global error handler, how to display the name of the java script function that throws this error

For example if I have the JS ajax get/post function
function cancelFeeReport() {
var postData = "claimId=" + $("#FeeReport_ClaimID").val() + "&page=#ViewBag.PageNumber";
$.ajax({
type: "POST",
url: '#Url.Action("Cancel", "FeeReports")',
dataType: "json",
async: false,
data: postData,
success: function (result) {
// Do something
},
complete: function () {
// Do nothing for now.
}
});
}
When an error happened in the above JS function. How to identify that cancelFeeReport() threw the error to AJAX global error handler
$(document).ajaxError(function( event, jqxhr, settings, thrownError ) {
alert('Error in ' + <functioname>);
});

Javascript code after file Download

I want to start some Javascript code after some file download from another domain.
jQuery.support.cors = true;
var formVars = $("form[name='myForm']").serialize();
var ajaxUrl = "http://some/path/openFilename.xlsx";
$.ajax({
url: ajaxUrl, type: 'GET', cache: false, data: formVars, timeout: 300000,
success: function (data) {
//Do some stuff here
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error" + thrownError);
},
complete: function (data) {
closeWaitScreen();
}
});
Often read solution is
window.location = ajaxUrl;
but this does not work for me, because it starts a new request without submitting the data from the form. (Same with window.open)
Here is my code that works without option to handle closeWaitScreen() after:
$("form[name='jasperlogin']").submit();
Of course also starts a new request when its used in the $.ajax
Any ideas how to handle it?

Ajax: error callback not firing

I'm having trouble getting the error callback getting called when I pass the error function as an object parameter in a function. However, when I declare it within the ajax code it works.
var ajaxSettings = new Object();
ajaxSettings.error = function(request, status, error){ console.log('bad failure');};
ajaxSettings.success = function(result) { console.log('good success');};
uploadFile(contents, ajaxSettings)
function uploadFile(contents, settings) {
$.ajax({
url: uri,
type: "PUT",
data: contents,
processData: false,
dataType: "json",
success: settings.success,
error: settings.error
});
}
In this case the error callback doesn't get fired. However if I write the error function declaration in the ajax code it works.
function uploadFile (contents, settings) {
$.ajax({
url: uri,
type: "PUT",
data: contents,
processData: false,
dataType: "json",
success: settings.success,
error: function(request, status, error) { console.log('bad failure'); },
});
}
I also tried making success: settings.error and it will call that function when it succeeds. What is the reason the error callback is not getting called?
I created a fiddle using your code check it Fiddle
You should initialize the ajaxSettings before use it
Try to declare your callbacks like below:
var ajaxSettings = {}
ajaxSettings.error = function(request, status, error){ console.log('bad failure');};
ajaxSettings.success = function(result) { console.log('good success');};
... because they are probably not visible in "uploadFile" function scope.

JQuery Ajax with Callbacks and Frame.js

I need to execute several jquery Ajax calls sequentially. I'm using callbacks, so every call has a success function that execute the next Ajax call and so on.
That was really a mess and very difficult code to read. After googling a find Frame.js that looks awesome but... i can't make it work.
To simplify the problem I'm just trying to call the first web service and I'm doing this:
File: MyPage.aspx:
Frame(function (next) {
this.request = { CodSeguro: 917766 };
Emision_ConsultarSeguro(request, next, next);
next();
});
Frame(function (next,ajaxResponse)
{
alert(ajaxResponse);
});
File: WebServices.js:
function Emision_ConsultarSeguro(requestData, okFunction, failFunction)
{
runAjax("Emision/emision.asmx/Consultar", request, okFunction, failFunction);
}
File: Common.js
function runAjax(url, request, okFunction, failFunction)
{
var dto = "{'request':" + JSON.stringify(request) + "}";
execAjax(url, dto, okFunction, failFunction);
}
File: Ajax.js
function execAjax(url, data, successFunction, errorFunction)
{
return $.ajax({
type: "POST",
url: GetUrl() + url,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
successFunction(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown {
errorFunction(XMLHttpRequest, textStatus, errorThrown);
}
});
}
The Ajax calls is executed, but ajaxResponse is always undefined!!! Help please!
It looks like under WebServices.js, you should replace your request argument with requestData.
function Emision_ConsultarSeguro(requestData, okFunction, failFunction)
{
runAjax("Emision/emision.asmx/Consultar", requestData, okFunction, failFunction);
}

Piping Value: Ajax + JQuery

I have a function in which I execute an ajax request and wait till I get a response and return a value but the value returned is undefined. What is wrong?
function GetVMData(url_s){
return $.ajax({
url: url_s,
crossDomain: true,
dataType: 'jsonp',
error: function(xhr, status, error) {
alert('failed')
}
}).pipe(function(data) { return data[4]; });
}
If I print the value of data[4] within the ajax callback it prints the right value, therefore i know the request is going through but when I try this:
var cord;
cord = GetVMData(url).done(function(cpu_USG) {
return cpu_USG;
});
alert(cord)
the value of cord is wrong.
var cord;
cord = GetVMData(url).done(function(cpu_USG) {
return cpu_USG;
});
alert(cord)
This code runs asynchronously. So you need to perform everything in the callback, like:
GetVMData(url).done(function(cpu_USG) {
alert(cpu_USG);
});
Here:
var cord;
cord = GetVMData(url).done(function(cpu_USG) {
return cpu_USG;
});
alert(cord);
cord contains object, not the value. And by the way, you don't know where ajax calling will be finished, so you should be familiar with idea of callbacks..
As an example:
function makeRequest(url, callback) {
$.ajax({
url: url,
crossDomain: true,
dataType: 'jsonp',
error: function(xhr, status, error) {
alert('failed')
},
success: callback
});
}
var do_something = function (data) {
alert(data[4]);
};
cord = makeRequest(url, do_something);

Categories