在非Ajax表單提交中顯示jQuery Mobile中的加載消息

Question

我在jQuery Mobile中提交了表單標籤上的data-ajax="false"表單以及enctype="multipart/form-data"，這樣我就可以利用iOS 6中的文件上載功能。必須禁用默認的Ajax表單提交爲了實際傳遞附加文件。

我想顯示使用這種默認的jQuery Mobile的加載消息：

$.mobile.loading('show'); 

爲defined in the docs。

我的表單驗證使用此代碼：

$(document).bind("pageinit", function(event, data) { 
    $("#contact-form").validate({ 
     // Custom validation messages 
     messages: { contact_name: "Please enter your full name.", contact_phone: "Please enter a valid phone number.", contact_zip: "Please enter your shipping zip code."}, 
     errorElement: "p", 
     submitHandler: function(form){ 

      //Get the data from the form fields and format correctly 
      var name = $("#contact-form #contact_name").val(); 
      var email= $("#contact-form #contact_email").val(); 
      var phone= $("#contact-form #contact_phone").val(); 
      var zip= $("#contact-form #contact_zip").val(); 
      var message = $("#contact-form #contact_message").val(); 

      document.forms["contact-form"].submit(); 
     } 
    }); 
}); 

如何（在jQuery Mobile的），我可以顯示默認加載微調當用戶提交表單（通過觸摸/點擊與type="submit"提交按鈕）？

Answer 1

我想你可能會想嘗試這樣的事：

$(document).bind("pageinit", function(event, data) { 

    $("#your_submit_button").click(function() { 

     // When the button is clicked, show loading message 
     $.mobile.loading('show'); 

     // Validate the form 
     $("#contact-form").validate({ 
      // Custom validation messages 
      messages: { contact_name: "Please enter your full name.", contact_phone: "Please enter a valid phone number.", contact_zip: "Please enter your shipping zip code."}, 
      errorElement: "p", 
      submitHandler: function(form){ 

      //Get the data from the form fields and format correctly 
      var name = $("#contact-form #contact_name").val(); 
      var email= $("#contact-form #contact_email").val(); 
      var phone= $("#contact-form #contact_phone").val(); 
      var zip= $("#contact-form #contact_zip").val(); 
      var message = $("#contact-form #contact_message").val(); 

      document.forms["contact-form"].submit(); 

      // Hide the loading message 
      $.mobile.loading('hide'); 

     } 
    }); 
}); 

希望這有助於