Question

I am using the jQuery validator to handle the initial validation, and if that passes, I wish to display “Verifying…” in a div tag while the remote call is processing. Both the id and name of the div tag are “verifying”.

Where do I need to stick this code to display before launching the remote test? I want the users to understand that it may take a few seconds and that they need to wait a moment.

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

});

Thanks

Answer 1

If I understand your question correctly, you need to display ‘Verifying…’ when the ajax call is made. And ajax call will only be made once the local validation goes through.

This will require you to update the div with ‘Verifying…’ text after the jquery form validation is complete. This means that instead of showing the message in invalidHandler, you might want to do that in submitHandler.

So your submitHandler could look like:

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

            }
        }
});

Also, you might just use the asynch call instead of making it a synchronous call that might halt the rest of the script execution.

UPDATE: display the animation for synchronous call

If you use jQuery animate, the code is executed till the animation is completed, so here is a workaround that works for me:

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

                }
            }
        });
  });