Multiple ajax calls in jquery

Question

I am using jquery for my project.

I have the following requirements:

I need to make a function call which invokes 5 other functions. These 5 functions are ajax calls which work independent of each other. The ajax calls get data from server and appends values to a global object.

I am facing difficulty in finding whether all the ajax calls are done or not. After all the calls are done , I have to set it to localStorage and then load another html file.

What is the best way to do it?

Atleast change the title of question with proper Problem statement — Satpal, Oct 09 '15 at 06:27
Since it appears you may be new here, I'd really suggest you read [How to Ask a Good Question](http://stackoverflow.com/help/how-to-ask). — jfriend00, Oct 09 '15 at 06:32

score 0 · Answer 1 · answered Oct 09 '15 at 07:21

0

mmm... Is it something you can do with jQuery Load, it makes sure everything loaded before you call any function or anything:

$(document).ready(function() {
 //Make sure all DOMs loaded! 
}):

answered Oct 09 '15 at 07:21

Alireza

100,211
27
269
172

score 0 · Accepted Answer · answered Oct 15 '15 at 09:12

If the number of ajax calls made are constant,You can use the following logic

COUNTER=5;
function reduceCounter(){
    COUNTER --;

    if(COUNTER == 0)
    {
    localStorage.Obj=JSON.stringify(Obj);         
    location.href="nextPage.html";

    }

In each of your ajax calls , call reduceCounter() at .always();

eg:

$.ajax({
        url: ..
        type: 'GET',
        dataType: 'json',       
     })
    .done(){...
       //set Obj
     },
    .fail(){...
     },.always(){

     reduceCounter();
   }

Multiple ajax calls in jquery

2 Answers2