Отображение загрузки во время работы webservice

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

Вы должны изменить ваш код немного, как это:

$(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() { }) уже (see details here), нет необходимости обертывать его дважды.

Answer 2

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