CODEWITHSUNDEEP
jqueryloadingform-submit
content01
content01

Reputation: 3225

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

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.

Upvotes: 12

Views: 76224

Answers (5)

Ben
Ben

Reputation: 1787

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.

Upvotes: 0

James Johnson
James Johnson

Reputation: 46067

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

Upvotes: 17

Jose Vega
Jose Vega

Reputation: 10258

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.

Upvotes: 2

Hazza
Hazza

Reputation: 6591

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

Upvotes: 1

Challe
Challe

Reputation: 896

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

Upvotes: 12

Related Questions