show loading message while loading contents in asp using jquery ajax

Question

In my asp site i'm trying to fetch user details from Active directory on page load. I like to show "loading.gif" image untill I get details. Could some help me as i'm new to jquery

Answer 1

Simple form of AJAX is the .get() method which should be enough for your needs.

First of all, add a placeholder in your HTML where the loading image will appear then when you have the contents loaded, those contents will be placed instead of the image.

For example:

<div id="ContentsPlaceholder"></div>

The jQuery code would now be:

$(function() {
    $("#ContentsPlaceholder").html("<img src='Loading.gif' />");
    $.get("GetData.asp", function(contents) {
        $("#ContentsPlaceholder").html(contents);
    });
});

This will put "Loading.gif" image in the placeholder then load data from page called "GetData.asp", and when the data is available it will put it instead of the image.

Answer 2

You can do that in this way:

$(function(){
    $('body').addClass('loading');
    $(window).load(function(){
      $('body').removeClass('loading');
      $('#wrapper').show(); // make display:none in the css.
    });
});

if you are using ajax then you can show it using .ajaxStart() and .ajaxComplete()

place it before ajax call:

$('#yourElem').ajaxStart(function() {
   $(this).addClass('loading');
});

Place this after ajax Call :

$('#yourElem').ajaxComplete(function() {
   $(this).removeClass('loading');
});