在jQuery / AJAX远程调用之前显示消息

Question

我正在使用jQuery验证器来处理初始验证，如果通过，我希望在远程调用处理时在div标签中显示“验证...”。 div标签的id和名称都是“验证”。

在启动远程测试之前，我需要在哪里坚持使用此代码来显示？我希望用户明白它可能需要几秒钟而且需要等待一段时间。

$(document).ready(function(){
$.validator.addMethod("noSpecialChars", function(value, element) {
    return this.optional(element) || /^[a-zA-Z0-9-_.]+$/i.test(value);
}, "Ignored");

$('[name=po_number]').focus();

jQuery.validator.messages.required = "";
$("#verifying").text("Msg #1"); // On entry
$("#form1").validate({
    invalidHandler: function(e, validator) {
        $("#verifying").text("Verifying...");
        var errors = validator.numberOfInvalids();

        if (errors) {
            var message = errors == 1
                ? 'PO must contain only letters, numbers, dashed, underscores or periods and must be between 2 and 15 characters long.'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("div.productError span").html(message);
            $("div.productError").show();
        } else {
            $("div.productError").hide();
        }
    },

    onkeyup: false,
    submitHandler: function(form) {
        $("div.productError").hide();
        // start nested, remote validate
        var HTMLtable = '';
        var po_number = $('[name=po_number]').val().toUpperCase();  // Force PO to uppercase
        $('[name=po_number]').val(po_number);                               // Load upper PO back to web page

        $.ajax({ type: "GET",
            url: "remote_dup_po_check.asp?company="+company+"&customer="+customer+"&po_number="+po_number,
            async: false,
            success : function(results) {
                if (results != 0) {
                    // The remote call to Avante will generate the entire HTML
                    // table that is returned OR 0 if there are no duplicates
                    HTMLtable = results;
                }
            }
        });
        if (HTMLtable != "") {
            var msg = 'PO <b>' + po_number + '</b> has already been used by your account on the following transactiosn:<br>'
            msg = msg + HTMLtable;
            msg = msg + '<br>';
            msg = msg + 'Do you still wish to use this PO?';

            // We need to set the options to correctly drive the prompting
            var options;
            options = { };
            options['pid'] = '0';   // Needed by the returnTrue which is STORED in payment.asp but
            options['sid'] = '0';   // which is CALLED from jquery.modaldialog.js (damn confusing!)
            options['title'] = 'Duplicate PO!';
            options['width'] = '600';
            $.modaldialog.prompt(msg, options);

            // Turn off the faded background and restore to normal.
            // Appears to be needed due to the sub-level of calling?
            $('#dialog-mask').fadeOut("fast");
            verifyMsg = "Msg2";
        } else {
            alert("Unique PO\n\nSubmit disabled for debugging");
            form.submit();      // PO is unique
        }
        // end nested, remote validate
    },

    rules: {
        po_number: {
            required: true,
            noSpecialChars: true,
            rangelength:[2,15]
        }
    },

    messages: {
        po_number: {
            required: 'Please enter a PO #.',
            noSpecialChars: 'The PO must be made of letters digits, underscores, dashes and/or periods (no spaces).',
            rangelength: 'The PO must be between 2 and 15 characters.'
        }
    },
    debug:true  // this lets it hit Firebug
});

}）;

由于

Answer 1

我错过了什么吗？

在拨打$.ajax(....

之前，请将其正确放置

Answer 2

如果我正确理解您的问题，您需要在进行ajax调用时显示“正在验证...”。只有在本地验证通过后才会进行ajax调用。

这将要求您在 完成jquery表单验证后，使用“验证...”文本 更新div。这意味着您可能希望在submitHandler中执行此操作，而不是在invalidHandler中显示消息。

所以你的submitHandler看起来像：

$("div.productError").hide();
var po_number = $('[name=po_number]').val().toUpperCase();  // Force PO to uppercase
$('[name=po_number]').val(po_number);

$("#verifying").text("Verifying...");

$.ajax({ type: "GET",
        url: "remote_dup_po_check.asp?company="+company+"&customer="+customer+"&po_number="+po_number,
        async: false,
        success : function(results) {
            if (results != 0) {
                // The remote call to Avante will generate the entire HTML
                // table that is returned OR 0 if there are no duplicates
                var HTMLtable = results;
                if (HTMLtable != "") {
                    var msg = .......
                    //Do something with result
                }

            }
        }
});

此外，您可能只是使用异步调用而不是使其成为可能暂停其余脚本执行的同步调用。

更新：显示同步通话的动画

如果你使用jQuery动画，代码会一直执行，直到动画完成，所以这是一个适合我的解决方法：

$("#verifying").text("Verifying...");

$('#verifying').animate({
    opacity: 1
  }, 500, function() {
        //animation complete, call ajax here
        $.ajax({ 
            type: "GET",
            url: "remote_dup_po_check.asp?company="+company+"&customer="+customer+"&po_number="+po_number,
            async: false,
            success : function(results) {
            if (results != 0) {
                // The remote call to Avante will generate the entire HTML
                // table that is returned OR 0 if there are no duplicates
                var HTMLtable = results;
                if (HTMLtable != "") {
                    var msg = .......
                    //Do something with result
                }

                }
            }
        });
  });