CODEWITHSUNDEEP
javascriptjquerymodal-dialogwait
MountainX
MountainX

Reputation: 6337

Showing a Wait Message When Submitting Long Javascript Requests

I would like to show an animated gif after a form button is clicked.

UPDATE: I found a solution here: http://www.corelangs.com/css/box/fulloverlay.html

I combined that with an animated gif (instead of the login form) to get the effect I wanted.

I used the .show() method in my script like this:

$(document).ready(function () {  
    $("#my_submit").click(function(e) { 
        console.log("please wait...");
        $( "#processing_gif" ).show();
        $( "#cover" ).show();

In my form I used these divs:

        <div id="processing_gif"></div>
        <div id="cover"></div>

And I used this CSS:

#processing_gif {
   position:fixed; 
   top:0; 
   left:0; 
   z-index:999; 
   width:100%;
   height:100%;
   opacity:0.8;
   background: url('/files/animation_processing.gif') center center no-repeat; 
   display:none;
}

#cover{ 
  position:fixed; 
  top:0; left:0; 
  background:rgba(256,256,256,0.9); 
  z-index:1; 
  width:100%; 
  height:100%; 
  display:none; 
}

Here is the full original tutorial:

<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> <a href="#loginScreen" class="button">Click here to Log In</a> </div> <div id="loginScreen"> <a href="#" class="cancel">&times;</a> </div> <div id="cover" > </div> </body> </html>

Upvotes: 0

Views: 3662

Answers (2)

Luis Garc&#237;a
Luis Garc&#237;a

Reputation: 58

You can just add $("my_image_selector").show() before $.ajax(params) and hide it when "success" or "error" occurs by adding there $("my_image_selector").hide()

Or you can use .ajaxStart and .ajaxStop. see jquery docs

Upvotes: 1

user2782001
user2782001

Reputation: 3488

ah jquery - sigh. You're going to have to tweak this to get the styling/presentation you want, but I'm going to point you in the general direction using plain old JavaScript.

  1. Add an image tag with the gif you want to use on the page where you want it

      < img src='loading.gif'/>

  2. Add an id and "display:none" to the image style to hide it

    <img id='loadingImg'  style='display:none;' src='loading.gif'/>

  3. get rid of the onclick handler in your submit button tag and instead put code like this below your form

     <script>
       //listen for click on your button
       document.getElementById('add-all-to-cart').addEventListener('click',
           function(event){
                //this is the code that runs when the button is clicked
                //get the button we clicked on
                var target=event.target||event.srcTarget;
                //set that button to disabled
                target.disabled=true;
                //display the loading image
                document.getElementById('loadingImg').style.display='block';  
            }

</script>

Upvotes: 0

Related Questions