jQuery Loading Status for $.ajax

Question

Hi All,

I am using the following code to get data from the database( from cs page itself i am creating the html code) and binding the html code to the div.

Problem:

If the database size is higher it takes some time to show the result. thet time i want to shoe a loading.gif image in that location. Once it get the data i have to hide the load image.

Edit:

Problem: Once it get hide, then the show() is not working.

 <div id="searchContainer" class="search_outer">
        <div id="Loading"></div></div>

Code:

    $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: "{ searchText: '" + searchText + "', product: '" + product + "', category: '" + category + "', artist:'" + artist + "'}",
                  url: "Search.aspx/FetchSearchResult",
                  dataType: "json",
                  success: function(data) {  $("#Loading").hide(); $("#searchContainer").html(data.d[0]);}});


     $("#ajax-query-place").ajaxStart(function() {
                      $("#Loading").show();
                  });

Geetha.

Answer 1

Easy: Before launching the ajax()-methode, display the spinner image. In the success method, hide it again.

Answer 2

$.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  data: "{ searchText: '" + searchText + "', product: '" + product + "', 
                  category: '" + category + "', artist:'" + artist + "'}",
                  url: "Search.aspx/FetchSearchResult",
                  dataType: "json",
                  success: function(data) { $("#searchContainer").html(data.d[0]);
                                            $("#loading-image").hide();
}});

$("#ajax-query-place").ajaxStart(function(){
      $("#loading-image").show();
});

$("#ajax-query-place") is an element which is getting or sending ajax queries.

Answer 3

The trouble is in your success: callback. When you do:

$("#searchContainer").html(data.d[0]);

You are overwriting the #Loading element because it is inside #searchContainer.

Use append() instead.

function(data) {  
    $("#Loading").hide(); 
    $("#searchContainer").append(data.d[0]);
}

Or just move the #Loading element outside of the #searchContainer element.

---

EDIT:

I'm guessing you don't have an element called #ajax-query-place.

You should use:

$("#searchContainer").ajaxStart(function() {
     $("#Loading").show();
});