Display loading image while post with ajax

Question

I know there are thousands of examples on the internet, but I want for the script I already have to display a loading gif image while the data is retrievedd. My java knowledge are poor, therefore I'm asking how to change the following:

<script type="text/javascript"> 
 $(document).ready(function(){
  function getData(p){
    var page=p;
    $.ajax({
        url: "loadData.php?id=<? echo $id; ?>",
        type: "POST",
        cache: false,
        data: "&page="+ page,
        success : function(html){
            $(".content").html(html);
        }
    });
}
getData(1);

$(".page").live("click", function(){
    var id = $(this).attr("class");
    getData(id.substr(8));
        });
      });
  </script>

And my div is here:

    <div class="content" id="data"></div>

Thanks. John

score 62 · Accepted Answer · answered Mar 24 '10 at 17:13

62

Let's say you have a tag someplace on the page which contains your loading message:

<div id='loadingmessage' style='display:none'>
  <img src='loadinggraphic.gif'/>
</div>

You can add two lines to your ajax call:

function getData(p){
    var page=p;
    $('#loadingmessage').show();  // show the loading message.
    $.ajax({
        url: "loadData.php?id=<? echo $id; ?>",
        type: "POST",
        cache: false,
        data: "&page="+ page,
        success : function(html){
            $(".content").html(html);
            $('#loadingmessage').hide(); // hide the loading message
        }
    });

answered Mar 24 '10 at 17:13

Keltex

26,220
11
79
111

5

If the Ajax request is not successful, the loading gif remains visible in this case. – ragklaat Nov 01 '12 at 08:50
1

Instead of hiding the div/gif in the success callback, add it under the always() method (This is the old complete() callback handler) – Narayana Mar 12 '13 at 16:50

score 10 · Answer 2 · answered Mar 24 '10 at 17:05

10

Take a look at ajaxStart and ajaxStop

answered Mar 24 '10 at 17:05

Felipe Lima

10,530
4
41
39

Felipe, thanks for the suggestion. However, I forgot to mention my js knowledge are poor? I saw those pages but don't know how to change my script. – Mar 24 '10 at 17:10

score 9 · Answer 3 · answered Jun 20 '13 at 08:37

$.ajax(
{
    type: 'post',
    url: 'mail.php',
    data: form.serialize(),
    beforeSend: function()
    {
        $('.content').html('loading...');
    },
    success: function(data)
    {
        $('.content').html(data);
    },
    error: function()
    {
        $('.content').html('error');
    }
});

have fun playing arround!

if you should have quick loading times which prevent te loading showing, you can add a timeout of some sort.

score 2 · Answer 4 · answered Nov 29 '13 at 09:43

This is very simple and easily manage.

jQuery(document).ready(function(){
jQuery("#search").click(function(){
    jQuery("#loader").show("slow");
    jQuery("#response_result").hide("slow");
    jQuery.post(siteurl+"/ajax.php?q="passyourdata, function(response){
        setTimeout("finishAjax('response_result', '"+escape(response)+"')", 850);
            });
});

})
function finishAjax(id,response){ 
      jQuery("#loader").hide("slow");   
      jQuery('#response_result').html(unescape(response));
      jQuery("#"+id).show("slow");      
      return true;
}

score 1 · Answer 5 · answered May 07 '14 at 18:42

<div id="load" style="display:none"><img src="ajax-loader.gif"/></div>

function getData(p){
        var page=p;
        document.getElementById("load").style.display = "block";  // show the loading message.
        $.ajax({
            url: "loadData.php?id=<? echo $id; ?>",
            type: "POST",
            cache: false,
            data: "&page="+ page,
            success : function(html){
                $(".content").html(html);
        document.getElementById("load").style.display = "none";
            }
        });

score 0 · Answer 6 · edited Oct 15 '16 at 14:27

//$(document).ready(function(){
//  $("a").click(function(event){
//  event.preventDefault();
//  $("div").html("This is prevent link...");
// });
//});   

$(document).ready(function(){
 $("a").click(function(event){
  event.preventDefault();
  $.ajax({
   beforeSend: function(){
    $('#text').html("<img src='ajax-loader.gif' /> Loading...");
   },
   success : function(){
    setInterval(function(){ $('#text').load("cd_catalog.txt"); },1000);
   }
  });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  
<a href="http://www.wantyourhelp.com">[click to redirect][1]</a>
<div id="text"></div>

score -5 · Answer 7 · edited Nov 09 '16 at 09:46

-5

make sure to change in ajax call

async: true,
type: "GET",
dataType: "html",

edited Nov 09 '16 at 09:46

Liam

27,717
28
128
190

answered Nov 08 '16 at 12:56

sapna

1

Why? How does this answer the question? – Liam Nov 09 '16 at 09:47

Display loading image while post with ajax

7 Answers7

Linked