Develop Reference

How to break out of AJAX polling done using setTimeout

I want to implement AJAX polling mentioned in this answer. Now I want to break out of polling when server return particular data value. How to do that?

Try something like this (where you change the condition to set continuePolling false to whatever you need):
(function poll() {
var continuePolling = true;
setTimeout(function() {
$.ajax({
url: "/server/api/function",
type: "GET",
success: function(data) {
console.log("polling");
if (data.length == 0)
{
continuePolling = false;
}
},
dataType: "json",
complete: function() { if (continuePolling) { poll(); }),
timeout: 2000
})
}, 5000);
})();

Javascript change window.location and run async ajax get

I want to start an ajax loop with GET-requests to check statuses from my controller. Once the loop is started i want to start a file download by changing window.location.
However i get no console.logs from this code, why?
function getExcelIKT() {
setInterval(function () {
$.ajax({
type: 'GET',
url: getDownloadCSVForIKTStatusUrl,
dataType: 'json',
async: 'true',
success: function (DownloadCSVForIKTStatus) {
console.log(DownloadCSVForIKTStatus);
}
});
}, 3000);
window.location = downloadExcelUrlIKT;
}

function getExcelIKT() {
setInterval(function () {
$.ajax({
type: 'GET',
url: getDownloadCSVForIKTStatusUrl,
dataType: 'json',
async: 'true',
success: function (DownloadCSVForIKTStatus) {
console.log(DownloadCSVForIKTStatus);
if (false) { //change to some conditions
window.location = downloadExcelUrlIKT;
}
}
});
}, 3000);
}
Just change if (false) { to something if (DownloadCSVForIKTStatus.success) {
Why don't you see console.logs? Because setInterval and $.ajax functions are asynchronous. For example
setTimeout(function () {
console.log(1);
setTimeout(function () {
console.log(2);
},0);
console.log(3);
},0);
console.log(4);
Result will be 4 1 3 2. (I use setTimeout instead of setInterval, which is also asynchronous even with timeout of 0 seconds)

How to fire anothing action before a each loop (with ajax) complete

I have try for the following for a long time and i have no more idea now, anyone can help me please.
I just want to reload the current page after add items to the cart, I have try the stupid way by count, promise then and other else, but all fail.
The problem is... the page already reloaded before the item add to the cart...!
The following is my sample:-
$("#Button").click(function () {
var CurrentURL = window.location.href;
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
--SelectedProduct
if (SelectedProduct === 0) {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
}
});
});
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
promise.done(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});

I don't know how much control you have over the server side code, but you should let the API handle adding an array of products to cart, that would make it so much faster and simpler. http://jsfiddle.net/hqn3eufa/
$("#Button").on('click', function () {
var selected_products_ids = [];
$('.SelectedProduct').each(function () {
selected_products_ids.push(this.id);
});
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { ids: selected_products_ids },
datatype: "json",
success: function() {
window.location.reload();
}
});
});

You can make use of the success callback of ajax and the reload function:
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success:function(data){
window.location.reload();
}
});

your page reload before the add to cart completes.
use a callback to find out when the add to cart is completed:
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
}).success(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});

Now i use the following way, it is stupid but work:-
Anyother suggestion..!?
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success: function (data) {
--SelectedProduct
if (SelectedProduct == 0) {
window.location.reload()
}
}
});
});

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);

How can I run Ajax functions synchronously from Javascript?

I have the following code:
$('#DoButton').click(function (event) {
event.preventDefault();
$("input:checked").each(function () {
var id = $(this).attr("id");
$("#rdy_msg").text("Starting" + id);
doAction(id);
});
});
function doAction(id) {
var parms = { Id: id };
$.ajax({
type: "POST",
traditional: true,
url: '/adminTask/doAction',
async: false,
data: parms,
dataType: "json",
success: function (data) {
$("#rdy_msg").text("Completed: " + id);
},
error: function () {
var cdefg = data;
}
});
}
When the button is clicked it checks the form and for each checked input it calls doAction() which then calls an Ajax function. I would like to make it all synchronous with a 2 second delay between the completion of one call and the running of the next. The delay is to give the user time to see that the last action has completed.
By setting async=false will that really make the ajax function wait?
How can I add a 2 second wait after the Ajax has run and before the next call to doAction?

There is option in jQuery to set the ajax function synchronous
$.ajaxSetup({
async: false
});
To make the function to wait you can use .delay()
Try the solution of this question also.

Try to do it using recursion
$('#DoButton').click(function (event) {
event.preventDefault();
doAction( $("input:checked").toArray().reverse() );
});
function doAction(arr) {
if( arr.length == 0 ) return;
var id = arr.pop().id;
$("#rdy_msg").text("Starting" + id);
$.ajax({
type: "POST",
traditional: true,
url: '/adminTask/doAction',
async: false,
data: { Id: id },
dataType: "json",
success: function (data) {
$("#rdy_msg").text("Completed: " + id);
setTimeout(function(){ doAction(arr); }, 2000);
},
error: function () {
var cdefg = data;
$("#rdy_msg").text("Error: " + id);
setTimeout(function(){ doAction(arr); }, 2000);
}
});
}

Use setTimeout for the AJAX call doAction.