在webservice運行時顯示加載

Question

在對頁面的初始請求中，我觸發web服務並希望顯示加載消息。 頁面加載完成後，我想從屏幕中刪除等待消息，但當複選框中的更改事件觸發另一個加載消息的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(); 
     }); 
    }); 
);