jQuery AJAX Loading – Display Images or Text Until Script is Finished (Part 2)

May 12, 2010 • 1 min read

javascript

This is a more practical way to display an image or text while an AJAX request is loading.

What we’re basically doing is forcing a DIV to have a starting image and then replacing it with the text return from the AJAX request.

<script>
function loadingAjax(div_id)
{
  $("#"+div_id).html('<img src="ajax-loader.gif"> saving...');
  $.ajax({
    type: "POST",
    url: "script.php",
    data: "name=John&id=28",
    success: function(msg){
      $("#"+div_id).html(msg);
    }
  });
}
<script>

<!-- usage -->
<a href="#" onclick="loadingAjax('myDiv');">save page<a>
<div id="myDiv"><div>