Waiting on jQuery AJAX calls to complete - javascript

I have an upload button that when clicking calls an ajax function to upload document. Once that function runs I call another ajax function to refresh a table on screen displaying all my documents. I have been looking at this question - Wait until all jQuery Ajax requests are done?
which would seem to be what I need. However I am un-sure how to implement for my current code. I have:
$("#UploadButton").on('click', function () {
doUpload(); // My First AJAX function
refreshTable(); // My Second AJAX Function
});
My doUpload AJAX function is as below:
function doUpload() {
$.ajax({
url: 'myupload url',
type: 'POST',
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false,
success: function () {
$.growlUI('Document Uploaded Sucessfully');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status + " " + thrownError);
}
});
}
My refreshTable ajax function then is:
function refreshTable() {
$.ajax({
url: 'url to get all files',
type: 'GET',
data: $('#searchForm').serialize(),
success: function (data) { populateTable(data); },
error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status + " " + thrownError); }
});
return false;
}
If I upload a document with current solution the success function of refreshTable seems to get hit too quickly and it doesn't have the find the most recent file uploaded. I had tried to add the call to refreshTable() in the success function of my doUpload with a setTimeout of 5 seconds and sometimes this was working and refreshing the table but other times it wasn't uploading the table.
I then changed the click handler on the button to the below to attempt to have the functionality the other StackOverflow answer I linked to above has but this isn't working either
$("#UploadButton").on('click', function () {
$.when(doUpload()).done(function() {
refreshTable();
});
});

You can use callback mechanism.
function doUpload(callback) {
$.ajax({ //some parameters
success: function (data) {
//do some work here
callback();
}
);
}
Then you can call the function chain as:
doUpload(refreshTable);

EDIT : #qamyoncu answers is better than mine.
In AJAX, calls are done async. that's why you don't get what you want.
Here is a tricky solution to avoid the problem you have:
function doUpload(init) {
var res = null;
var _init = init || false;
if (!_init) {
_init = true;
$.ajax({
/// ajax call for doUpload()...
});
}
if (res == null) {
setTimeout(function(){ doUpload(_init); }, 100);
} else {
refreshTable();
}
}

Related

Display a specific <div> content at setTimeout()

In the below code I am making an API call to my backend node.js app using setTimeout() which calls my AJAX at every 5 seconds. Inside my AJAX success I am displaying divContent1 & divContent2 based on certain condition which should execute at least once. After that only divContent2 should be visible at each setTimeout() calls.
index.html
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "http://localhost:8070/api/route1",
type: 'POST',
dataType:'json',
success: function(res) {
//Some Task
}
});
$("#myButton").click(function(){
const route2 = function() {
$.ajax({
url: "http://localhost:8070/api/route2",
type: "POST",
dataType: "json",
data: { var1: val1 },
success: function (res) {
// Various tasks
if(res.flag){
$("#divContent1").hide();
$("#divContent2").show();
}
else{
$("#divContent1").show();
}
//Functions that handle div content data
},
beforeSend: function() {
$("#divContent1").hide();
$("#divContent2").hide();
},
complete: function() {
setTimeout(route2,5000);
},
});
};
$(function(){
route2();
})
});
});
</script>
The setTimeout() calls the entire route2 function which handles all the display and insertion of div content. However, the ask is to only display divContent2 from the second call.
Looking for a solution for this
The setTimeout() calls the entire route2 function which handles all
the display and insertion of div content. However, the ask is to only
display divContent2 from the second call.
You're calling route2 recursively with setTimeout(route2,5000); under complete. So this will run infinitely as complete occur each time an ajax call is completed (wether success or error). So what you can do is to create a timer and clear it after the second execution, something like this:
var ctr = 0, timer =0;
const route2 = function() {
$.ajax({
...
success: function (res) {
//Write you logic based on ctr
}
complete: function() {
if(ctr>0){
clearTimeout(timer)
}else{
timer = setTimeout(route2,5000);
ctr = ctr+ 1;
}
},
});
};
Will an external variable be enough? Just define it in the outer context and set/check it to choose the behavior:
// before declaring button click handler
var requestDoneAtLeastOnce = false;
// ...
// somewhere in success handler
success: function (res) {
if (!requestDoneAtLeastOnce) {
requestDoneAtLeastOnce = true;
// do something that belongs only to handling the first response
}
else {
// this is at least the second request, the other set of commands belongs here
}
}

Call ajax on before page unload

I'm trying to call an ajax before user leaving a page, this what i have done so far. But it doesn't even hit the ajax page.
This is what i have done so far.
window.onbeforeunload = closeIt();
function closeIt()
{
var key="save-draft";
$.ajax({
url: "app/ajax_handler.php",
type:"GET",
data:{key:key},
success: function(data) {
return data;
}
});
}
I Have tried this one also both failed in my case.
$( window ).unload(function() {});
The only way I think is to let the user know that it's a process on background with a confirm message, that will block the exit until user click on Accept or you've got the response.
Something like that:
window.onbeforeunload = closeIt();
function closeIt()
{
/*var key="save-draft";
$.ajax({
url: "app/ajax_handler.php",
type:"GET",
data:{key:key},
success: function(data) {
return data;
}
});*/
setTimeout(function() {
return confirm("There is a process that isn't finished yet, you will lose some data. Are you sure you want to exit?");
}, 1000);
}

JQuery .ajax dont call function

I have object "game" and when i call create game, its use jquery ajax... everything works ok, but when i want to call from ajax success function addLoadEvent it doesnt call it, when i try call this function from createGame (commented part of code here) its works... do you know why i cant call it from ajax success? i try console log from success and it was print in console so ajax works well. Thank everybody for help
var game=new ttt_game();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
function ttt_game () {
this.createGame = createGame;
function createGame(){
/*addLoadEvent(function(){
document.getElementById('player1_n').textContent=player1+':';
document.getElementById('player2_n').textContent=player2+':';
document.getElementById('turn').textContent='Čaká sa na príchod súpera.';
});*/
$.ajax({
type: "POST",
url: "process.php",
data: {'function': 'create','game_id': game_id,'player1': player1},
dataType: "json",
success: function(data){
addLoadEvent(function(){
document.getElementById('player1_n').textContent=player1+':';
document.getElementById('player2_n').textContent=player2+':';
document.getElementById('turn').textContent='Čaká sa na príchod súpera.';
});
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
}
game.createGame();
it looks like on addLoadEvent, you are adding a window.onload handler, this works when you call from createGame when when it is called the window.onload is not yet fired but when you are calling it from the success handler the onload event might have already fired because the ajax is processed asynchronously

Prevent AJAX Queue from blocking browser

Note: simplified example..
I've got a page with 1000 table rows. For each row, i need to "do some work" on the server via an AJAX call, then in the callback, update that table row saying done.
Initially i tried just firing off the 1000 ajax requests inside the .each selector, but the browser was locking up.
So i changed it to try and use an internal ajax counter, so only ever fire off 50 at a time.
Here's the code:
$('#do').click(function () {
var maxAjaxRequests = 50;
var ajaxRequests = 0;
var doneCounter = 0;
var toDo = $('#mytable tr').length;
$.each($('#mytable > tr'), function (i, v) {
while (doneCounter < toDo) {
if (ajaxRequests <= maxAjaxRequests) {
ajaxRequests++;
doAsyncStuff($(this), function () {
ajaxRequests--;
doneCounter++;
});
} else {
setTimeout(function() {
}, 1000);
}
}
});
});
function doAsyncStuff(tr, completeCallback) {
$.ajax({
url: '/somewhere',
type: 'POST',
dataType: 'json',
data: null,
contentType: 'application/json; charset=utf-8',
complete: function () {
completeCallback();
},
success: function (json) {
// update ui.
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
// update ui.
}
});
}
But the browser is still being locked up. It never goes into the $.ajax complete callback, even though i can see the request coming back successfully (via Fiddler). Therefore its just sleeping, looping, sleeping, etc because the callback is never returned.
I've got a feeling that the entire doAsyncStuff function needs to be asynchronous?
Any ideas on what i am doing wrong (or how i can do this better)?
You are doing a while loop inside the .each callback function, so there is much more ajax request than 1000, the worst is 1000*1000.
You could delay each ajax request with different time.
$('#do').click(function () {
$('#mytable > tr').each(function (i, v) {
var $this = $(this);
setTimeout(function () {
doAsyncStuff($this, function () {
console.log('complete!');
});
}, i * 10);
});
});
The browser gets locked because of the WHILE... You are creating an endless loop.
The while loops runs over and over waiting for the doneCounter to be increased, but the javascript engine cannot execute the success call of the ajax since it is stuck in the while...
var callQueue = new Array();
$('#mytable > tr').each(function(key,elem){callQueue.push($(this));});
var asyncPageLoad = function(){
var tr = callQueue.splice(0,1);
$.ajax({
url: '/somewhere',
type: 'POST',
dataType: 'json',
data: null,
contentType: 'application/json; charset=utf-8',
complete: function () {
completeCallback();
asyncPageLoad();
},
success: function (json) {
// update ui.
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
// update ui.
}
}
};
asyncPageLoad();
This will call the requests one by one. If you want, simply do a for() loop inside to make maybe 5 calls? And increase the amount if the browser is fine.
Actually, I prefer to send new request when current request is done. I used this method to dump db tables (in this work). Maybe it gives an idea.
See this link, check all check boxes and click Dump! button. And you can find the source codes here (see dumpAll function).

Add a timeout to load()

var refreshId_hxlatestposts = setInterval(function() {
var el = $("#hxlatestposts");
var req = $.get("example.php");
el.fadeOut('slow', function () {
req.done(function( data ){
el.html(data).fadeIn('slow');
});
});
}, 60000);
This is what i use to refresh a div every minute, sometimes it gets hung up when the site it is getting the feed from is down or something. I'd like to some how have a timeout so if it cannot load the php file in X seconds then return 'Fail to load'.
jQuery documentation (.ajaxSetup()) suggests using .ajaxSetup() to set the value for timeout, instead of using it in individual requests.
You can use request.fail() to register a function in case of a failed request.
$.ajaxSetup({
timeout: 5000
});
var refreshId_hxlatestposts = setInterval(function() {
var el = $("#hxlatestposts");
var req = $.get("example.php");
el.fadeOut('slow', function() {
req.done(function(data) {
el.html(data).fadeIn('slow');
});
req.fail(function(jqXHR, textStatus) {
el.html('Fail to load').fadeIn('slow');
});
});
}, 60000);
Nice use of deferred objects.
If you replace $.get with $.ajax, you can add a timeout.
var req = $.ajax({
url: "example.php",
type: "GET",
timeout: 5000 // 5 seconds
});
and then add a fail handler
req.done(function(){...}).fail(function(){
alert("failed to load");
});
You'll want to check the status of the incoming response to ensure that the service returned a 200 Ok status. This is more reliable than just waiting for a timeout-- you will know if it's good data or not an can decide to retry by putting your timeout in the complete functions.
$.ajax({
//...
success: function(data, textStatus, xhr) {
console.log(xhr.status);
//handle status codes etc.
// then set your timeout
},
complete: function(xhr, textStatus) {
console.log(xhr.status);
//handle status codes etc.
// then set your timeout
},
// OR
fail: function( xhr, textStatus ){
//retry code or timeout
}
});
jQuery's $.get is just a shorthand for $.ajax, which is used when more flexibility is required (in your case, yes)
Replace $.get("example.php"); with:
$.ajax({
type: "GET",
url: "example.php",
timeout: X*1000,
}).done(function(data) {
el.fadeOut('slow', function () {
el.html(data).fadeIn('slow');
});
}, 60000);
});
where X is number of seconds you would want it to wait (timeout)

Categories