Загрузка дисплея во время работы веб-сервиса

Question

При первоначальном запросе к странице я запускаю веб-сервис и хочу отобразить сообщение о загрузке. Когда страница закончила загрузку, я хочу удалить ожидающее сообщение с экрана, но отобразить его снова, когда событие изменения в флажке инициирует вызов Ajax с другим сообщением загрузки.

Этот код не соответствует данной спецификации:

$(document).ready(
    $(function() {
     $('#loadingDiv').hide();

      $('#productsDropDown')
         .change(function() {
            var prodValue = $(this).val();
            $('#proddate').load('getpdate.php', {prod: prodValue });
    }); 

    $('#loadingDiv')
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })    
    ;   
    });
);

что я делаю не так?

Answer 1

$(document).ready(function() {
    var loader = $('#loadingDiv');
    loader.hide();


    $('#productsDropDown').change(function() {
        var prodValue = $(this).val();
        loader.show();
        $('#proddate').load('getpdate.php', {prod: prodValue }, function() {
            loader.hide();
        });
    });
);

Answer 2

Вам нужно немного изменить свой код, например:

$(function() {
  $('#loadingDiv').hide();
  $('#productsDropDown').change(function() {
    var prodValue = $(this).val();
    $('#proddate').load('getpdate.php', {prod: prodValue });
  }); 

  $('#loadingDiv').ajaxStart(function() {
    $(this).show();
  }).ajaxStop(function() {
    $(this).hide();
  });
});

В настоящее время у вас есть это:

$(document).ready(
    $(function() {
    });
);

document.ready принимает функцию, вы передаете ей элемент jquery. $(function() { }) эквивалентно уже завернутому в $(document).ready(function() { }) ( подробности см. Здесь ), нет необходимости дважды переносить его.