How to show a loading gif mean while a submit form is being executed JQuery

Question

I'm trying to show a simple spinner gif meanwhile a submit is being executed (it takes a bit because I have to establish some communications with providers via web services).

So, I have this:

$('#gds_form').submit(function() {
        var pass = true;
        //some validations

        if(pass == false){
            return false;
        }

        $("body").prepend('<div class="ui-widget-overlay" style="z-index: 1001;"></div>');
        $("body").prepend("<div id ='PleaseWait'><img src='/images/spinner.gif'/></div>");
        return true;
    });

the thing is, that the .gif doesn't show any animation, it's like it is frozen.

Why?

There's another way to implement this (notice that I'm not using AJAX and I don't want to)?

Thank you.

i assume you are using an animated gif and that it animates if you show it "normally" — Muad'Dib, Nov 15 '11 at 18:07
If the `gif` is frozen, that has nothing to do with JavaScript/jQuery. — Sparky, Nov 15 '11 at 18:33
**The gif is frozen cause IE6, IE7 and IE 8 are buggy.** Don't know about IE9 yet, but I know for sure **on all other browsers the gif does NOT freeze**. Read this for the [correct answer](http://stackoverflow.com/a/780617/260080) and for [some possibile workarounds](http://stackoverflow.com/a/7151504/260080). — Marco Demaio, Feb 04 '12 at 13:11
The gif freezes on my Ubuntu/Firefox but not on my Ubuntu/Chromium — Pierre de LESPINAY, Oct 08 '12 at 10:44

score 17 · Answer 1 · answered Nov 15 '11 at 18:29

17

Using the jQuery submit function, you can specify a loading image like this:

$('#form').submit(function() {
    $('#wait').show();
    $.post('/somepage.htm', function() {
        $('#wait').hide();
    });
    return false;
});

answered Nov 15 '11 at 18:29

James Johnson

45,496
8
73
110

Using the show hide with the submit function worked well. Simple and robust. – codepuppy Sep 24 '12 at 09:51

score 12 · Accepted Answer · answered Nov 15 '11 at 18:06

12

Have you tried loading the image on document ready, only having it hidden. Then display it in your function? This way, the image is already loaded and spinning.

$(document).ready(function() {
    $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 1001; display: none;"></div>');
    $("body").prepend("<div id='PleaseWait' style='display: none;'><img src='/images/spinner.gif'/></div>");
});

$('#gds_form').submit(function() {
    var pass = true;
    //some validations

    if(pass == false){
        return false;
    }
    $("#overlay, #PleaseWait").show();

    return true;
});

answered Nov 15 '11 at 18:06

Challe

866
12
26

1

Did this work??? In my tests the image continues to freeze under IE7 and IE8, on all other browser the image does NOT freeze until the server response arrives. – Marco Demaio Feb 04 '12 at 11:01
This does not work with my Ubuntu/Firefox (the gif animation freezes) – Pierre de LESPINAY Oct 08 '12 at 10:39

score 2 · Answer 3 · answered Nov 15 '11 at 18:08

The real issue with your implementation is how does the client side know when your request has completed. One of the reasons why Ajax is helpful is because we have a notion of states and therefore we can display a loader while the client is waiting for a response and remove the loader when the client receives a response.

How are you going to determine when the communication with the web service is completed? You say that you don't want to use Ajax, but if you are going to want to query a service to determine whether your communication completed, you are probably seeing something that will require Ajax.

It's a regular form submit, when you click it the browser doesn't take you away until the server has responded to the request, giving animation time to spin a little. However, in IE (tested 7-9) starting the request will freeze the animation, even if it was already spinning on the page. — Esailija, Nov 15 '11 at 18:19

score 1 · Answer 4 · answered Nov 15 '11 at 18:08

1

Use .show() and .hide() to toggle the loading animation while it sends?

answered Nov 15 '11 at 18:08

Hazza

6,441
3
24
37

score 0 · Answer 5 · edited Nov 09 '15 at 12:42

0

I would the div on the page to start with, but with style='display:none' then stick a $('#PleaseWait').show() in your code when you want it to appear.

If you leave the display:none off you can edit see what it looks like without needing to submit the form again and again.

NB: you may want to wrap the overlay and the gif in a parent div for convenience.

edited Nov 09 '15 at 12:42

Community

1
1

answered Nov 15 '11 at 18:10

Ben

1,767
16
32

How to show a loading gif mean while a submit form is being executed JQuery

5 Answers5

Linked