Question

I have this script:

$(function() {
$(this).ajaxStart(function() {
$("#loading").show(); });
$(this).ajaxStop(function() {
$("#loading").hide(); });
});

$(document).ready(function() { 
$('.button').click(function () {
$("#contentDiv").load("content.php");
});

$('.button2').click(function () {
$("#contentDiv").load("content2.php");
});
});

And this html:

<div id="contentDiv">
<div id="loading"></div>

</div>

I want to show loading .gif before every new load, but now it works only first time whole page is loaded. So when I click first time “button”, “loading” shows, “content” is loaded and “loading” hides. When I than click “button2”, “content2” is loaded but “loading” did not shows. I try to take out “loading” div from “contentDiv”, but than “loading” never hides.

Answer 1

I made it working this way:

$(document).ajaxStart(function() {
$('.loading').show();
$('#contentDiv').hide();
}).ajaxStop(function() {
$('.loading').hide();
$('#contentDiv').show();
});

html:

<div id="contentDiv"></div>
<div class="loading"></div>

I have to made loading div class because ID was not working.