当非Ajax表单提交时在jQuery移动中显示加载消息

Question

我在jQuery移动中提交一个表单，表单标签上带有data-ajax="false"以及enctype="multipart/form-data"，这样我就可以利用iOS 6中的文件上传功能。您必须禁用默认的Ajax表单提交才能实际通过附加文件。

我想使用下面的代码显示默认的jQuery移动加载消息：

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

当用户提交表单时(通过使用type="submit"触摸/单击提交按钮)，如何(在jQuery移动设备中)显示默认的加载微调器？

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');

         }
    });
});

希望这能有所帮助