Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimated gif during script processing
    text
    copied!<p>I have a script called notify_me.php which I run like so:</p> <pre><code>script type="text/javascript"&gt; //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); }); }); }); &lt;/script&gt; </code></pre> <p>and I would like to show a animated loading .gif until the script is printed. The code for that is :</p> <pre><code>&lt;div class="search_load" &gt; &lt;span class="searching_font"&gt; Fetching your flight prices...&lt;/span&gt;&lt;br/&gt;&lt;br/&gt; &lt;img src="images/searchloading.gif"&gt; &lt;/div&gt; </code></pre> <p>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.</p> <p>Tried some different ways with append(); and appendTo(); but can't seem to get it working.</p> <p>Appreciate your help on this!</p> <p>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?!</p> <p>SOLUTION: Guys, I solved it by looking in to @Rohan's link. Check out below. Thank you all!</p> <pre><code>$(document).ready(function(){ $("#submit").click(function(){ $('#info').show(); $('html,body').animate({scrollTop: $("#info").offset().top},'slow'); $('.container').after('&lt;div class="search_load"&gt;&lt;/div&gt;'); var d = $('form').serialize(); $.get('php/notify_me.php',d,function(data){ $(".container").html(data); $('.search_load').hide(); }); }); }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload