Search jQuery

jQuery Forum

wait for multiple $.ajax calls with post load animations to finish

in Getting Started • 6 years ago

I had a function that called a few $.ajax posts using $.when which was working, but since I added some load delay animations to the success return of the $.ajax asyn call it isn't waiting for those in the $.when

<script>
function tableOne() {
$.ajax({
url: "/cont/_ActionOne",
type: "GET",
})
.done(function (partialViewResult) {
var degree = 90;
$(".type1").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
$("#tableOne").html(partialViewResult);
var degreex = 0;
$(".type1").css("transform", "rotateY(" + degreex + "deg)");
console.log("tableOne");
})
})
}
</script>

<script>
function tableTwo() {
$.ajax({
url: "/cont/_ActionTwo",
type: "GET",
})
.done(function (partialViewResult) {
var degree = 90;
$(".type2").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
$("#tableTwo").html(partialViewResult);
var degreex = 0;
$(".type2").css("transform", "rotateY(" + degreex + "deg)");
console.log("TableTwo");
})
})
}
</script>

<script>
function tableThree() {
$.ajax({
url: "/cont/_ActionThree",
type: "GET",
})
.done(function (partialViewResult) {
var degree = 90;
$(".type3").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
$("#tableThree").html(partialViewResult);
var degreex = 0;
$(".type3").css("transform", "rotateY(" + degreex + "deg)");
console.log("TableThree");
})
})
}
</script>

<script type="text/javascript">
$(document).ready(function () {
$.when(tableOne(), tableTwo(), tableThree()).then(function () {
console.log("PostLoad");
$('.CheckBox').attr('disabled', false);
})
});
</script>

the console.log("PostLoad") is fired before any of the other functions so this is hitting that before they are done. I have tried wrapping the functions in the $.when with $.ajax but that hasn't made a difference.

thanks in advance

Replies(9)

jakecigar

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

For

$.when(tableOne(), tableTwo(), tableThree()).then(function () {

to work, each function must return the $.ajax.

function tableOne() {
return $.ajax({

JΛ̊KE

rob lewis

Re: Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

thanks someone has suggested that and I have added it, however it doesn't properly work. I have 5 functions in total and when i run it, it works for about 2 of the functions, sometimes one. but the .then is being hit before some of the functions have finished...

jakecigar

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

I’d like to see a demo of the code that doesn’t work.

I rarely use multiple Ajax calls, but when I do, I synch them with $.when that way.

JΛ̊KE

watusiware

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

Are you referring to the completion of Ajax, or completion of the animations?

If you mean the latter, no, it will not wait for the animations. They are asynchronous, and you haven't wrapped them in Deferreds. Your code only waits for the completion of Ajax. And I note that you only wait for 3 Ajaxs, not 5. Maybe you only included 3 in the example.

rob lewis

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

Hi, yes partly the animations, its the html load section that needs to complete really as that is what renders the @Html.CheckBoxFor()... that I need to apply the enable checkbox property for.

Yes I only used three in an example to keep it short.

When you say defferedds, how do I achieve this? I have tried..

var d1 = $.Deferred();

var d2 = $.Deferred();

var d3 = $.Deferred();

$.when(

d1, d2, d3, d4, d5

).done(function (v1, v2, v3, v4, v5) {

console.log("here");

$('.facetCheckBox').attr('disabled', false);

// postLoad().delay(5000);

postLoad()

})

d1.resolve(TableOne());

d2.resolve(TableTwo());

d3.resolve(TableThree());

but that doesn't seem to wait either... do I have to use that .promise() somewhere some how?

jakecigar

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

See examples @ deferred.promise() | jQuery API Documentation

I suggest you create array of promises, so you can code something like https://jsfiddle.net/jakecigar/21pczgu9/ <--

var a = [
f(1),
f(2),
f(3)
]
$.when.apply(0, a).done(function() {
console.log("all done");
})
function f(i) {
var d = $.Deferred();
$.getJSON("/echo/json/", {
i: i
}).done(function(data) {
console.log("got", i)
d.resolve(data)
})
return d;
}

JΛ̊KE

jakecigar

Re: Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

You can call d.resolve after a while, when your transform is done, assuming there is some animation or in a setTimeout.

JΛ̊KE

rob lewis

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

thanks mate, I do look at the jquery docs but I'm not that great with it and don't use it often so its hard to understand a lot.

my code now looks like

<script type="text/javascript">
$(document).ready(function () {

var a = [
TableOne(1),
TableTwo(2),
TableThree(3)
]

$.when.apply(0, a).done(function () {
console.log("all done");
$('.CheckBox').attr('disabled', false);
})

and the tables now look like..

<script type="text/javascript">
//Load Counts Sections
function TableOne(i) {
var def = $.Deferred();
$.ajax({
url: "/Cont/_TableOne",
type: "GET",
success: function (partialViewResult) {
var degree = 90;
$(".type1").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {
$("#ageTable").html(partialViewResult);
var degreex = 0;
$(".type1").css("transform", "rotateY(" + degreex + "deg)");
console.log("TableOne");
def.resolve(partialViewResult);
})
}
})

... other tables follow same trend just different name and controller call.

It's working! so I'm happy but is this code properly written? Yours was different using $.getJson...

jakecigar

Re: wait for multiple $.ajax calls with post load animations to finish

6 years ago

$.getJSON is just a shortcut function that really calls $.ajax. So, it is the same.

Glad to have assisted.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

wait for multiple $.ajax calls with post load animations to finish

Replies(9)

Re: wait for multiple $.ajax calls with post load animations to finish

Re: Re: wait for multiple $.ajax calls with post load animations to finish

Re: wait for multiple $.ajax calls with post load animations to finish

Re: wait for multiple $.ajax calls with post load animations to finish

Re: wait for multiple $.ajax calls with post load animations to finish

Re: wait for multiple $.ajax calls with post load animations to finish

Re: Re: wait for multiple $.ajax calls with post load animations to finish

Re: wait for multiple $.ajax calls with post load animations to finish

Re: wait for multiple $.ajax calls with post load animations to finish

Statistics

Tags

Actions