Show loader till all ajax asyc calls is not finished

Question

0.00/5 (No votes)

See more:

Hi,
Please clarify following problem if any solution is there -
In ASP.NET i am calling 4 Web Methods in parallel using $.ajax with async=true. Now lets assume there are 4 functions that i am calling to utilize the benefit of ajax as -

BindGridRecords();
BindNotifications();
BindProjectFiles();
BindFileCount();

All of them are called in same sequence as describe above. I had used a loader gif image to show the loader in full screen in a div and called in first function to show it and hide in the very last function (I know that it is not a good way because it may be possible that the last function may completed before the first one in async calls). Now i do not have any way how to show the loader image until all of the above calls have not completed. It doesn't matter which one completed first.

What I have tried:

I had tried the $.when() function but it looks like it calls in synchronous and degrade the performance. So the purpose of async calls is not utilized.

For now i am using async=false and set the functions in a way that the other one starts after complete the early one. But it is taking time.

i had also tried this as well, but it does not works perfectly because it affects the other calls as well

$(document).ajaxStart(function() {
    $('#overlay').show();    
});

$(document).ajaxStop(function() {
    $('#overlay').hide();
});

Posted 23-Sep-17 2:37am

Ajay_Saini

Updated 28-Feb-23 2:23am

v4

Add a Solution

Comments

F-ES Sitecore 23-Sep-17 9:05am

Define a count variable with the number of methods you're calling

var count = 4;

on the complete event of each ajax method call a function that decreases the count and if it's 0 remove the loader.

function finishAjax()
{
count--;
if (count == 0)
{
// remove loader
}
}

Ajay_Saini 23-Sep-17 13:43pm

Ohhh great idea. You are right, i hope it should work. I will try with that approach to see the effect.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 15937505 · Answer 1 · 2023-02-28T02:23:00

I think if you're looking for a proper solution to this type of issue you should try out this kind of stuff to prevent this kind of issue...

1. create a function that sets a loader in your page with a unique loader id, and returns that unique id.
2. create another function to close the loader by that unique loader id.
3. You should be aware of the let & var declaration with JavaScript.

For example

function initPageLoader(){
	//return random loaderId.
	let min = 100000, max = 999999;
	let randomLoaderId = "fullPageLoader" + ( Math.floor(Math.random() * (max - min + 1) ) + min) + "Id";
	let loader = $("<div>").addClass("fullpage-loading").attr({"id":randomLoaderId})
	$("body").prepend(loader);
	return randomLoaderId;
}

function hidePageLoader(loaderId){
	$("#"+loaderId).remove();
}

function getDataUsingAJAX(){
	let loaderID; // mandatory to declare loaderID variable with let.
	
	$.ajax({
		type : "POST",
		data : {data: JSON.stringify(formData)},
		URL : ".../save.html",
		dataType: 'JSON',
		beforeSend: function( xhr ) {
			loaderID = initPageLoader(); //init the loader.
        },
		success : function(res) {
			// callback(res);
		},
		error : function(xhr, status, errorThrown) {
			console.log(xhr, status, errorThrown);
		},
		complete:function(res){
			hidePageLoader(loaderID); //close the loader.
		}
	});
}

This will helps you.

Show loader till all ajax asyc calls is not finished

1 solution

Solution 1

Add your solution here

Preview 0

Show loader till all ajax asyc calls is not finished

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us