Question

I have a script called notify_me.php which I run like so:

script type="text/javascript">
    //Run notify_me.php script
    $(document).ready(function(){
      $("#submit").click(function(){
        var d = $('form').serialize();
        $.get('php/notify_me.php',d,function(data){
           $(".container").html(data);
        });
      });
    });
</script>

and I would like to show a animated loading .gif until the script is printed. The code for that is :

<div class="search_load" >
  <span class="searching_font"> Fetching your flight prices...</span><br/><br/>
  <img src="images/searchloading.gif">
</div>

How can I write a function that shows the .search_load class during the processing of notify_me.php. The .search_load class should also be shown in the .container div.

Tried some different ways with append(); and appendTo(); but can’t seem to get it working.

Appreciate your help on this!

EDIT: I got the .search_load div to show the first time I hit the #submit. The second time it doesn’t show att all. This is the problem I’m trying to solve. Any ideas?!

SOLUTION: Guys, I solved it by looking in to @Rohan’s link. Check out below. Thank you all!

$(document).ready(function(){
   $("#submit").click(function(){
     $('#info').show();
     $('html,body').animate({scrollTop: $("#info").offset().top},'slow');
     $('.container').after('<div class="search_load"></div>');
     var d = $('form').serialize();
     $.get('php/notify_me.php',d,function(data){
       $(".container").html(data);
       $('.search_load').hide();
     });
   });
});

Answer 1

Steps:

1. Make your loading div hidden
2. When loading starts, display it using .show() and modifying the CSS so that its placement is correct
3. OnLoaded -> div.hide()

Refer to this: How to show waiting message during sync ajax call in browser