SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A loading animation while making several ajax calls?

    After many years, I'm finally trying to learn Javascript instead of avoiding it. Something that seems basic that I'm having a hard time getting a good tutorial for is a simple loading screen. When my home page is loaded, I need to make 4 ajax calls to get JSON data and store them in localStorage. I simply want to display a loading screen while these calls are being made, and when they are finished, show the UI. How could I do this and insure that all 4 were loaded?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Not sure what you mean by loading screen.

    Here is a comprehensive tutorial about how to make a div fade in while the AJAX calls are taking place and fade out when they are finished:
    http://andrewchaa.me.uk/2012/04/26/s...t-with-jquery/

  3. #3
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, yes, you deciphered my bad communication skills correctly. Thank you for the tutorial. I guess to be more specific here, with my case where I have 4 different ajax calls being made, how could I hide the loading div only after all 4 are done? My only idea would be to show the loading message then call the hide function in the success callbacks of each one?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    jQuery now defines a 'when' function for this purpose.
    It accepts any number of deferred objects as arguments, and executes a function when all of them resolve.

    So in your case, you could do something like this:

    Code JavaScript:
    $.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
        // the code here will be executed when all four ajax requests resolve.
        // a1, a2, a3 and a4 are lists of length 3 containing the response text,
        // status, and jqXHR object for each of the four ajax calls respectively.
    });
     
    function ajax1() {
        // NOTE:  This function must return the value 
        //        from calling the $.ajax() method.
        return $.ajax({
            url: "someUrl",
            dataType: "json",
            data:  yourJsonData,            
            ...
        });
    }

    I wish I could take credit for the code, but I can't.
    I found it here: http://stackoverflow.com/questions/3...quest-are-done

  5. #5
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, exactly what I was looking for, thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •