Показать/скрыть не работать во время запроса AJAX

Question

У меня есть функция, которая запрашивает данные с помощью ajax. Я хотел бы отображать занятый счетчик, но hide/show не меняет видимость элементов.

function RequestDataFromServer(stuff, url) { 
    var result; 

    $.ajax({ 
     url: url, 
     data: { stuff: Stuff}, 
     async: false, 
     beforeSend: function() { 
      $("#divOverlay").show(); 
      console.log("Starting..."); 
     }, 
     complete: function() { 
      $("#divOverlay").hide(); 
      console.log("Complete!"); 
      result = true; 
     }, 
     success: function (data) { 
      AddDataToCache(data); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      result = false; 
     } 
    }); 

    return result; 
} 

Я знаю, что синтаксис show/hide корректен, потому что он работает, когда я прикрепляю его к кнопкам. Я также попытался с помощью:

$(document).ajaxStart(function(){ 
    $("#divOverlay").show(); 
}) 

С не влияет (однако, если я шаг через это событие в Chrome это делает шоу и скрыть элементы). Я также попытался показать/скрыть в функции, которая вызывает функцию RequestDataFromServer ... все равно ничего. У меня нет идей.

Answer 1

хорошо попробуйте это использовать в вашем divOverlay css display: none; этот произведение тоже.

$(document).ajaxStart(function(){ 
      $("#divOverlay").css("display", "block"); 
     }); 

вас в AJAX

beforeSend: function() { 
      $("#divOverlay").show(); 
      console.log("Starting..."); 

это означает, что "показать мой DIV перед тем отправить мою AjX" Вы написали 2 раз та же инструкция. Выберите один и удалите другой.

Answer 2

Я протестировал это, и .show() и .hide() работают в моих аякс-звонках просто отлично. Я предполагаю, что у вас есть синтаксические ошибки, вызывающие это. Давайте немного потрудиться.

Во-первых, как уже упоминалось, элемент, который вы пытаетесь показать, доступен в DOM. Это наиболее распространенное упущение ИМО. Я полагаю, у вас есть такой элемент, как:

<div id="divOverlay" style="display:none;">Something</div> 

Во-вторых, переменные чувствительны к регистру. Удостоверьтесь, что переменная stuff имеет нижний регистр при передаче data: {stuff: stuff}.

В-третьих, стоит отметить, что complete вызывается после того, как success или error, и, следовательно, ваш result = true действительно должны быть определены в success, а не complete.

function RequestDataFromServer(stuff, url) { 
    var result; 

    $.ajax({ 
    url: url, 
    data: {stuff: stuff}, 
    async: false, 
    beforeSend: function() { 
     $("#divOverlay").show(); 
     console.log("Starting..."); 
    }, 
    complete: function() { 
     $("#divOverlay").hide(); 
     console.log("Complete!"); 
    }, 
    success: function (data) { 
     AddDataToCache(data); 
     result = true; 
    }, 
    error: function() { 
     result = false; 
    } 
    }); 

    return result; 
} 

Answer 3

Я была такая же проблема, он работал, когда асинхронная: правда. Все еще не знаю причину, но она сработала.