jQuery Loading Status for $.ajax -

I am using the following code to get data from database (I am creating HTML code from CS page only ) And the binding html code

problem:

If the size of the database is high then it takes some time to show results. At that time I want to shoe a load.gif image in that place.

Editing:

Problem: Show () is not working once it's hidden.

strong>

code:

  $ .ajax ({type: "post", contentType: "application / json; charset = utf-8", data: "{SearchText: '" + searchText + "', Product: '" + Product + "', Category: '" + Category + "', Artist: '" + + Artist +' '} ", url:" Search. Aspx / FetchSearchResult ", datatype:" Jason ", success: work (data) {$ (" # loading "). ($ #" # SearchContainer ") .html (data.d [0]);}} ); $ ("#AJX-query-place"). AJAXStart (function () {$ ("# Loading"). Show ();});  

Geeta.

The problem is in your success: when you do the callback:

  $ ("# searchContainer"). Html (data.d [0]);   
 You are overwriting the  # loading  element because it is inside  #searchContainer . 
 
 Use  app ()  instead. 
 
  function (data) {$ ("# Loading") Hide (); $ ("# SearchContainer") attached (data.d [0]). }   
 or  #searchContainer  element to move out the  # loading  element. 
 
 
  Edit:  
 
 I think you do not have an element named  # ajax-query-place  is. 
 
 You should use: 
 
  $ ("# searchContainer"). AJAXStart (function () {$ ("# Loading"). Show ();});