Состояние загрузки jQuery для $ .ajax

Question

Я использую следующий код для получения данных из базы данных (с самой страницы cs я создаю HTML-код) и привязываю HTML-код к DIV.

Проблема:

Если размер базы данных больше, для отображения результата требуется некоторое время. тогда я хочу загрузить изображение loading.gif в этом месте. Как только он получит данные, мне нужно скрыть загрузочное изображение.

Edit:

Проблема: если скрыть, то show () не работает.

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

Код:

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

Гит.

Answer 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") - это элемент, который получает или отправляет ajax-запросы.

Answer 2

Проблема в вашем success: обратном вызове. Когда вы делаете:

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

Вы перезаписываете элемент #Loading, потому что он находится внутри #searchContainer.

Вместо этого используйте append().

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

Или просто переместите элемент #Loading за пределы элемента #searchContainer.

---

EDIT:

Полагаю, у вас нет элемента с именем #ajax-query-place.

Вы должны использовать:

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

Answer 3

Легко: перед запуском ajax () - метода, отобразите изображение счетчика. В методе успеха скройте это снова.