Question

So I have a Div tag in which I load AJAX content. I want to make it so when a user triggers the AJAX event that it keeps the current content in there with a spinning loading circle in the center. I am currently using the following code

    j("#AJAXContent")
        .html("reloading")
        .load(Url, "foo="+bar);

However, That code will just replace the current div tag with “reloading” as the text then the new content comes and replaces that.

Answer 1

If you want to show a loading image in the content div then add a class when the ajax call is made. This class will basically show a loading image as a background of the container. The other alternative is have a absolute positioned div which some height/width and loading image in the center. Show this div at the center and top of the container when you make a ajax call.

.loading
{
  background:none url("loading.png") no-repeat center center;
}

j("#AJAXContent").addClass("loading").load(Url, "foo="+bar, function(){
   j("#AJAXContent").removeClass("loading");
});

The other way is to show a loading div on top of content div before you make a ajax call.