jQuery Loading Status for $.ajax

Question

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.

Duplicate of http://stackoverflow.com/questions/2351209/adding-a-loading-image-to-a-jquery-ajax-post — Christian Studer, May 19 '10 at 12:11

score 1 · Answer 1 · answered May 19 '10 at 12:10

1

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

answered May 19 '10 at 12:10

Christian Studer

24,947
6
46
71

sundowatch · Answer 2 · 2010-05-19T12:54:46.340

1

$.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.

edited May 19 '10 at 12:54

answered May 19 '10 at 12:15

sundowatch

3,012
3
38
66

I don't understand this answer. `ajaxQuery` contains an `XMLHTTPRequest` object. So what does `ajaxQuery.ajaxStart(...)` do? Did you test this? – user113716 May 19 '10 at 12:28
ajaxQuery is a variable. ajaxQuery.ajaxStart(function(){}); returns a function when ajax started. Yes I tried. – sundowatch May 19 '10 at 12:40
Showing error: "Microsoft JScript runtime error: Object doesn't support this property or method" – Geeth May 19 '10 at 12:46
@sundowatch - ajaxQuery is a variable that stores an `XMLHTTPRequest` object, which does not have a `ajaxStart()` function. This does not work. The `$.ajax()` request may work, but your `ajaxQuery.ajaxStart(...)` call will fail. The correct form for `ajaxStart()` is `$("#loading-image").ajaxStart(function() {...});`. – user113716 May 19 '10 at 12:49
@Geetha - You're getting that error because sundowatch is trying to run `startAjax()` against an object that does not have that method. See my comment above. – user113716 May 19 '10 at 12:51
Yeah the upper comment is true. I forgot. I edited my answer. – sundowatch May 19 '10 at 12:52
For the first click it is working fine. But for the next search the loading image is not showing. I have edited the question with the html code. – Geeth May 19 '10 at 13:02

user113716 · Accepted Answer · 2010-05-19T13:43:13.660

1

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();
});

edited May 19 '10 at 13:43

answered May 19 '10 at 13:20

user113716

318,772
63
451
440

After calling hide() show is not working.(Control is not moving to $("#ajax-query-place").ajaxStart(function() :( – Geeth May 19 '10 at 13:32
On page load i am hiding the loading image. after that it is not showing. – Geeth May 19 '10 at 13:35
I assume you tried one of my solutions above. If so, place an alert in your `ajaxStart()` function, like `alert('ajaxStart was called');`. If `ajaxStart()` is getting called, and it is still not showing, we know there's another issue. – user113716 May 19 '10 at 13:38
I just updated my answer. I'm guessing you don't have an element called `#ajax-query-place`, but rather you just used that from another answer here. That was meant to be a place holder since you didn't have any code at the time. – user113716 May 19 '10 at 13:44

jQuery Loading Status for $.ajax

3 Answers3