AJAX call working fine but the loading gif disappears too quick

Question

I am working on an AJAX call which is updating records and fetching the latest records as well and then loading multiple DIV, the process of updating the fetching is working perfectly fine except that I am displaying the loading gif while this process is taking place. The gif appears but then disappears too quick. I am wondering how to keep this loading giv on screen till the entire process is complete.

This is my AJAX call

<script>
    function update() {
        $.ajax({
            type: "POST",
            url: "abc.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
                $('#income-expense-div').load('dashboard-sidebar.php');
                $('#pay-div').load('dashboard-pay.php');
                $('#assets-div').load('dashboard-assets.php');
                $('#liabilities-div').load('dashboard-liabilities.php');
                $('#dvloader').hide(500);

            }
        });
    }

</script>

This is my loading div that appears with gif image

<div style="display: none" class="loading_gif" id="dvloader">
     <p><img style="margin-top: 20%;margin-left: 40%;" src="assets/img/loading.gif"></p>
</div>

This is the CSS of loading div

.loading_gif{
    margin: auto;
    position: fixed;
    z-index: 1000;
    cursor: wait;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    width: 100%;
    opacity: 0.8;
}

I will really appreciate any help here

@AnoopJoshi the code is working fine, except that loading div that displaying the loading bar disappears too quick, i even tried `fadeOut` but that not help either — Shairyar, Jun 19 '14 at 10:58
what is the need of ajax here? you doesnot use that html returned from that ajax call. — Anoop Joshi P, Jun 19 '14 at 10:58
Why are you doing all these loads? You should just post once and then get a response and the use the response to update the page — Wayne Ellery, Jun 19 '14 at 11:03
Reason I am using AJAX is because there is a jqplot graphic on the page and i need to reload this graphic without reloading the page, so when the user enters the information on page, based on this information graphic gets updated, this part of updating the graphic is working fine, only the loading gif is disappearing to quick, reason for using this gif is because i need to reload js files of jqplot each time ajax call is made, other wise the jqplot disappears — Shairyar, Jun 19 '14 at 11:10
@A.Wolff I removed my comment... was supposed to post it on a different thread.. thanks for pointing.. ;) — Fr0zenFyr, Jun 19 '14 at 11:18
@Baig Well so there is maybe better way, try e.g: http://stackoverflow.com/questions/5178197/how-to-refresh-jqplot-bar-chart-without-redrawing-the-chart Your question sounds like a XY problem: http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — A. Wolff, Jun 19 '14 at 11:24

MrCode · Accepted Answer · 2014-06-19T11:17:58.203

4

You can use $.when with a group of deferreds. In each of the .load() calls, have a callback that resolves the related deferred. Obviously this example is overly verbose to be clear what it's doing, but you can improve it by storing the URLs in an array and use a loop.

success: function (html) {
    var load1 = new $.Deferred();
    var load2 = new $.Deferred();
    var load3 = new $.Deferred();
    var load4 = new $.Deferred();

    $.when(load1, load2, load3, load4).then(function(){
        $('#dvloader').hide(500);
    });

    $('#income-expense-div').load('dashboard-sidebar.php', function(){ load1.resolve(); });
    $('#pay-div').load('dashboard-pay.php', function(){ load2.resolve(); });
    $('#assets-div').load('dashboard-assets.php', function(){ load3.resolve(); });
    $('#liabilities-div').load('dashboard-liabilities.php', function(){ load4.resolve(); });
 }

edited Jun 19 '14 at 11:17

answered Jun 19 '14 at 11:11

MrCode

63,975
10
90
112

I am checking your solution, will get back shortly – Shairyar Jun 19 '14 at 11:19
I have tried your code but the `dvloader` is not hiding, it goes on forever – Shairyar Jun 19 '14 at 11:27
Check your code is exactly as the answer because this should work. You can see it working in this demo: http://jsfiddle.net/hC9Tu/ Also check that you have all 4 elements with the IDs shown in the code, if any elements are missing then the loading image will continue to show. – MrCode Jun 19 '14 at 11:41
many thanks the code is working fine now, on network tab few scripts were giving 404 error and once i sorted that it seems to be working fine except that the loading gif now gets stuck :) it does disappear though once everything is done loading. It starts out fine but in the middle the loading bar gets stuck. Any idea how to fix that? By stuck i mean it freezes for few seconds. – Shairyar Jun 19 '14 at 12:14
Are you doing any synchronous ajax anywhere? That can cause the gif to pause. Also if the you are inserting a huge amount of content in the load calls that could be it. There's some more info here http://stackoverflow.com/questions/191413/why-does-my-spinner-gif-stop-while-jquery-ajax-call-is-running – MrCode Jun 19 '14 at 12:31
Thanks, I will have a look at that link, it seems to be happening only on Chrome and IE, in Firefox it is working perfectly. – Shairyar Jun 19 '14 at 12:44

score 0 · Answer 2 · answered Jun 19 '14 at 10:58

This should be what you want.

$.ajax({
            type: "POST",
            url: "abc.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
                $('#income-expense-div').load('dashboard-sidebar.php');
                $('#pay-div').load('dashboard-pay.php');
                $('#assets-div').load('dashboard-assets.php');
                $('#liabilities-div').load('dashboard-liabilities.php');
                //$('#dvloader').hide(500);

            },
            complete: function() {
                $('dvloader').hide(500);
            }
});

`complete` runs when this AJAX call is finished, it doesn't wait for all the other calls. — Barmar, Jun 19 '14 at 11:02

AJAX call working fine but the loading gif disappears too quick

2 Answers2