How to show a loading gif mean while a submit form

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.

Answer 1

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;
});

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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;
});