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)
Related
$.ajax({
url: vars.url,
type: "post",
data: r,
async: true,
processData: vars.process,
contentType: vars.contenttype,
beforeSend: function(){
if(vars.loadbar == 'true'){
setInterval(function () {
$.getJSON(domain + '/core/files/results.json', function (data) {
console.log(data);
})
}, 1000);
}
},
complete: function(){
clearInterval();
},
succes: function(data){
..................
}
})
So I am trying to end the infinite loop my code is spawning as soon as my ajax call is being done. It now phones pretty much every second to my file to get results, which i want to stop as soon as my ajax call is completed.
I am not sure how to approach this, since if i assign a variable to the setInterval (being it in the function of the beforeSend itself, or outside of the AJAX call), it either wont see the variable, or my variable is empty. I think I am approaching this wrong. Can I check within the beforeSend if the AJAX call is complete to end the loop?
you can store your interval as a global variable and clear it when you need it. like so:
let interval;
$.ajax({
url: vars.url,
type: "post",
data: r,
async: true,
processData: vars.process,
contentType: vars.contenttype,
beforeSend: function(){
if(vars.loadbar == 'true'){
interval = setInterval(function () {
$.getJSON(domain + '/core/files/results.json', function (data) {
console.log(data);
})
}, 1000);
}
},
complete: function(){
clearInterval(interval);
},
succes: function(data){
..................
}
}
I need to find a way to slow down the reload of page that window.location.href does.
This is needed because the animation of toggle button is not shown.
Is there a way?
Here code used:
$(".closeMan").change(function () {
if ($(this).prop("checked")) {
$.ajax({
type: "POST",
url: "./close_man.php",
success: function (result) {
window.location.href = window.location.href;
},
});
}
});
Simply use setTimeout (if you really need to slow down your application...):
$(".closeMan").change(function () {
if ($(this).prop("checked")) {
setTimeout(() => {
$.ajax({
type: "POST",
url: "./close_man.php",
success: () => {
window.location.href = window.location.href;
},
});
}, 500);
}
});
You can use a timeout, and window.location.reload():
setTimeout(function() {
window.location.reload();
}, 1000); // Time in milliseconds
Note: you cant call it like setTimeout(window.location.reload, 1000) because you will get an Illegal invocation error.
You may use settimeout to handle timing problem.
$(".closeMan").change(function () {
if ($(this).prop("checked")) {
setTimeout(function(){
$.ajax({
type: "POST",
url: "./close_man.php",
success: function (result) {
window.location.href = window.location.href;
},
});
}
}, 1000);
});
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);
})();
(function poll() {
$.ajax({
url: "/Home/Tail", success: function (data) {
console.log(data);
},
data: { datetime: getISODateTime(new Date()) },
dataType: "json",
timeout: 30000
});
})();
I have the above code, i am doing long polling to an endpoint.
However, it is too fast. Isnt it supposed to do it every timeout seconds?
However, it is too fast. Isnt it supposed to do it every timeout
seconds?
timeout property here will only timeout the call and then fire the error. If you find it too fast, you must be doing something else besides the code posted above.
In order to do a long-polling one way could be to use Javascript setTimeout when you receive a response. Also, in such cases you should have an abort figured out somewhere.
For example (this will poll every 3 seconds):
<button id="start">Start</button>
<button id="stop">Stop</button>
var timer;
function poll() {
$.ajax({
url: "/echo/json/", success: function (data) {
console.log(data);
timer = setTimeout(poll, 3000);
},
data: { datetime: new Date()},
dataType: "json",
timeout: 30000
});
};
$("#start").on("click", function() { console.log("started.."); poll(); });
$("#stop").on("click", function() { console.log("stopped.."); clearTimeout(timer); });
Fiddle: http://jsfiddle.net/abhitalks/rf0uaaLj/
You could use the timeout setting in the ajax options like this:
(function poll() {
$.ajax({
url: "/Home/Tail", success: function (data) {
console.log(data);
},
timeout: 30000,
data: { datetime: getISODateTime(new Date()) },
dataType: "json"
});
})();
Read all about the ajax options here
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.