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

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>

If you're looking for a sweet AJAX loading image, check out ajaxload.info


comments powered by Disqus