Develop Reference

AJAX stop propagation next calls

I am making global interceptor of ajax calls, to track some specific responces and prevent next calls.
The local call is:
$.ajax({
contentType: "application/json",
dataType: "json",
method: "PUT",
url: url + '/0'
}).then(function (data) {
console.log('LOCAL: this should not be seen too');
nextUser();
});
The interceptior is
$(document).ajaxStart(function () {
console.log("GLOBAL: start");
}).ajaxSend(function (e, xhr, opts) {
console.log("GLOBAL: send");
}).ajaxError(function (e, xhr, opts) {
console.log("GLOBAL: error");
}).ajaxSuccess(function (e, xhr, opts) {
if (xhr.responseJSON.test) {
$('#upgradeModal').modal('show');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
// change status code
xhr.abort();
return false;
}
console.log("GLOBAL: this should not be seen");
}).ajaxComplete(function (e, xhr, opts) {
console.log("GLOBAL: complete");
}).ajaxStop(function () {
console.log("GLOBAL: stop");
});
Really I need to thack ajaxSuccess or ajaxComplete but others put here just to test.
The result is
GLOBAL: start
GLOBAL: send
GLOBAL: complete
GLOBAL: stop
LOCAL: this should not be seen too
So this console.log
"GLOBAL: this should not be seen"
is not shown correct, but I need not to see this
"LOCAL: this should not be seen too"
also. As you see I tried everything in code like "stopImmediatePropagation" but still nothing. Is is possible to stop propagation of this ajax call?

Promise and callback function in ajax, when does success take place ?

Right now I have a code like this:
$.ajax({
url: apiUrl + valueToCheck,
data: {
format: 'json'
},
error: function () {
},
dataType: 'json',
success: function (data) {
checkAgainstDBHelperWH(data, valueToCheck);
},
type: 'GET'
});
If I am not mistaken, checkAgainstDBHelperWH is known as a callback function. The function executes once the servers sends back response for this particular HTTP /ajax request.
I want to try writing something like the one below, but I don't know what are the effects or is it even logical:
var request = $.ajax({
url: apiUrl + valueToCheck,
data: {
format: 'json'
},
error: function () {
},
dataType: 'json',
success: function (data) {
checkAgainstDBHelperWH(data, valueToCheck);
},
type: 'GET'
})
arrayOfPromises.push(request);
$.when.apply(null, arrayOfPromises).done(function () {
//...some javascript here
});
I want to understand if the .done(function () is fired after the callback function checkAgainstDBHelperWH is completed? Or whatever I am trying to write above does not flow consistently with how ajax works?
Thanks!

I tested it, your code only work if the function(in this case, 'checkAgainstDBHelperWH') doesn't call ajax.
If you want to wait finishing the inner ajax process, use then() and return inner ajax.
var ajaxs =
$.get("xxx").then(function() {
return $.get("yyy").done(function() {
});
});
Here is the jsfiddle.
I'm not sure whether this way is general or not.

Event after all ajax calls are complete

I have a click event that fires off 3 ajax calls:
$("#button").click(function(e) {
e.preventDefault();
$.ajax(call1);
$.ajax(call2);
$.ajax(call3);
some_function() //should fire off AFTER all ajax calls are complete
});
Is there a way for me to confirm all ajax calls have been fired BEFORE firing off my some_function() function?
Thanks in advance!

You can use $.when
Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
$.when($.ajax(call1), $.ajax(call2), $.ajax(call3))
.done(function () {
some_function();
});
If (for some reason) you have an array of promises, then you may call this method using Function.prototype.apply():
$.when.apply($, ajaxArray)
.done(function () {
some_function();
});

I suggest you to use async: false and put the $.ajax inside another ajax, somelike this...
$.ajax({
async: false,
// ...
complete: function() {
$.ajax({ // second ajax
async: false,
// ...
complete: function() {
$.ajax({ // second ajax
async: false,
// ...
complete: function() {
some_function();
}
});
}
});
}
});

It depends if you require success responses, but consider the following:
$.ajax({
url: "http://some.url.example.com/endpoint",
})
.always(function (data){
// Process the data
$.ajax({
url: "http://some.url.example.com/endpoint2",
})
.always(function (data2){
// Process the data
$.ajax({
url: "http://some.url.example.com/endpoint3",
})
.always(function (data) {
someFunction();
});
});
});
There is a lot more reading that could be done about jQuery deferred objects and ES6 Promises.
If you wish to set a timeout and don't care about the result, set the timeout option `$.ajax({url: "http://some.url.example.com/endpoint", timeout: 500})
OR
Set a variable in each and use window.setTimeout to check when they've all been set, but that is horrible.

Best approach for dependent ajax calls in jQuery

I have a situation where I need to make 5 ajax calls. The second ajax call will be made after first call returns response, the third call is made when second call completes and likewise fourth and fifth call.
There are 2 approach for this which I know, I could nest ajax calls on success of previous call or make async false before first call and make it true after last call. Could any one suggest which is and WHY it is the better way to accomplish my task or there is some more better way to do this.
//First Way
$.ajax({
...
success:function(){
$.ajax({
...
success:function(){
$.ajax({
...
success:function(){
$.ajax({
...
success:function(){
do something
}
});
}
});
}
});
}
});
//second way
$.ajaxSetup({
async: false
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajax({
});
$.ajaxSetup({
async: true
});

Could any one suggest which is and WHY it is the better way to accomplish my task...
Using async: false will make the calls synchronous, which locks up the UI of the browser while the calls are running. It's better to leave the UI responsive while the calls are running.
So leaving the calls asynchronous is best; there are a few ways to do that:
There's using the success handler, as you demonstrated:
$.ajax({
/*...*/,
success: function() {
$.ajax({
/*...*/,
success: function() {
$.ajax({
/*...*/,
success: function() {
$.ajax({
/*...*/,
success: function() {
$.ajax({
/*...*/
});
}
});
}
});
}
});
}
});
(I'm assuming you've either registered a global ajax error handler, or that you have one in /*...*/ above.)
There's using a promise chain instead, which is quite similar:
$.ajax({/*...*/})
.done(function() {
$.ajax({/*...*/})
.done(function() {
$.ajax({/*...*/})
.done(function() {
$.ajax({/*...*/})
.done(function() {
$.ajax({/*...*/});
});
});
});
});
Or you can use a function loop, like so:
(function() {
var calls = [
function() { $.ajax({/*...*/, success: next)},
function() { $.ajax({/*...*/, success: next)},
function() { $.ajax({/*...*/, success: next)},
function() { $.ajax({/*...*/, success: next)},
function() { $.ajax({/*...*/, success: next)}
];
var index = 0;
next();
function next() {
if (index < calls.length) {
// Do the next, increment the call index
calls[index++]();
}
}
})();

setTimeout an ajax call in jquery

Is there a way to use setTimeout in this ajax call. This is my code:
jQuery.ajax({
type : "POST",
url : dir+"all/money/myFile.php",
data : "page="+data.replace(/\&/g, '^'),
success : function(msg) {
var info = jQuery('.product_overview #allinfo').html();
var url = 'Check Preview'; jQuery('.option_additional').next().find('textarea:first').text(info+url);
},
complete: function() {
jQuery('.add-to-cart button.btn-cart').delay(500).trigger('click');
}
});
I want to do something before this ajax will be triggered that is why I'll use setTimeout or something that would delay this action.
How would I do that?
Thanks in advance :)

Haven't used jquery with setTimeout before but try
var t = window.setTimeout(function, delay);
replace function in the above code with your jquery function.

In a complete function:
complete: function () {
setTimeout(function () {
// your action here
}, 500);
}

You can use beforeSend,
Example
$(function() {
function callBeforeAjax() {
alert('and now do ajax');
}
$.ajax({
beforeSend: callBeforeAjax,
type: "POST",
url: "/",
data: "",
success: function(msg) {},
complete: function(msg) {
alert(msg);
}
});
});
Refer this

#Tols is right, it works. Try something like this: setTimeout(function(){jQuery('.add-to-cart button.btn-cart').trigger('click');}, 500);