0

私は jQuery バリデーターを使用して最初の検証を処理しています。それが成功した場合は、リモート呼び出しの処理中に div タグに「Verifying...」を表示したいと考えています。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
});

});

ありがとう

4

2 に答える 2

2

何か不足していますか？

電話をかける直前に置くだけです$.ajax(....

于 2012-08-20T20:29:58.623 に答える
1

あなたの質問を正しく理解している場合は、ajax 呼び出しが行われたときに「検証中...」と表示する必要があります。また、ajax 呼び出しは、ローカル検証が通過した後にのみ行われます。

これには、jquery フォームの検証が完了した後で、 「Verifying...」というテキストで div を更新する必要があります。これは、invalidHandler でメッセージを表示する代わりに、submitHandler で表示したい場合があることを意味します。

したがって、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 animate を使用する場合、アニメーションが完了するまでコードが実行されるため、次の回避策が役立ちます。

$("#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
                }

                }
            }
        });
  });
于 2012-08-20T20:50:39.440 に答える