Question

我在验证时使用Bootstrap Wizard来解决ajax页面问题。看看上面的图片，首先ajax请求成功加载向导没有问题，在几秒钟ajax请求这个向导将无法正确加载。

向导脚本：

var FormWizard = function () {

    return {
        //main function to initiate the module
        init: function () {
            if (!jQuery().bootstrapWizard) {
                return;
            }

            var form = $('#delivnotes');
            var error = $('.alert-danger', form);
            var success = $('.alert-success', form);

            form.validate({
                doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
                errorElement: 'span', //default input error message container
                errorClass: 'help-block help-block-error', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                rules: {
                    vendor: {
                        required: true,
                        maxlength: 1
                    },
                    'goods[]': {
                        required: true,
                        minlength: 1
                    },
                    // Additional info
                    instructions: {
                        required: true,
                        maxlength: 1000
                    },
                    origin: {
                        required: true,
                        maxlength: 1000
                    },
                    destination: {
                        required: true,
                        maxlength: 1000
                    },
                    wo_date: {
                        required: true
                    },
                    // Payment
                    charge: {
                        required: true,
                        number: true
                    },
                    PPN: {
                        required: true
                    },
                    payment: {
                        required: true
                    }
                },

                messages: { // custom messages for radio buttons and checkboxes
                    'goods[]': {
                        required: "Please select at least one goods before continue",
                        maxlength: jQuery.validator.format("Please select at least one goods before continue")
                    },
                    vendor: {
                        required: "Please select one vendor from below table before continue",
                        maxlength: jQuery.validator.format("Please select only one vendor before continue")
                    }
                },

                errorPlacement: function (error, element) { // render error placement for each input type
                    if (element.attr("name") == "PPN") { // for uniform radio buttons, insert the after the given container
                        error.insertAfter("#form_PPN_error");
                    } else if (element.attr("name") == "goods[]") { // for uniform checkboxes, insert the after the given container
                        error.insertAfter("#form_goods_error");
                    } else if (element.attr("name") == "payment") { // for uniform radio buttons, insert the after the given container
                        error.insertAfter("#form_payment_error");
                    } else if (element.attr("name") == "vendor") { // for uniform checkboxes, insert the after the given container
                        error.insertAfter("#form_vendor_error");
                    } else if (element.attr("name") == "wo_date") { // for uniform radio buttons, insert the after the given container
                        error.insertAfter("#wo_date_error");
                    } else {
                        error.insertAfter(element); // for other inputs, just perform default behavior
                    }
                },

                invalidHandler: function (event, validator) { //display error alert on form submit   
                    success.hide();
                    error.show();
                    Mtl.scrollTo(error, -200);
                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
                },

                unhighlight: function (element) { // revert the change done by hightlight
                    $(element)
                        .closest('.form-group').removeClass('has-error'); // set error class to the control group
                },

                success: function (label) {
                    if (label.attr("for") == "vendor" || label.attr("for") == "goods[]" || label.attr("for") == "PPN" || label.attr("for") == "payment") { // for checkboxes and radio buttons, no need to show OK icon
                        label
                            .closest('.form-group').removeClass('has-error').addClass('has-success');
                        label.remove(); // remove error label here
                    } else { // display success icon for other inputs
                        label
                            .addClass('valid') // mark the current input as valid and display OK icon
                        .closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
                    }
                },

                submitHandler: function (form) {
                    success.show();
                    error.hide();
                    form.submit();
                }

            });

            var handleTitle = function(tab, navigation, index) {
                var total = navigation.find('li').length;
                var current = index + 1;
                // set wizard title
                $('.step-title', $('#form_wizard_dn')).text('Step ' + (index + 1) + ' of ' + total);
                // set done steps
                jQuery('li', $('#form_wizard_dn')).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }

                if (current == 1) {
                    $('#form_wizard_dn').find('.button-previous').hide();
                } else {
                    $('#form_wizard_dn').find('.button-previous').show();
                }

                if (current >= total) {
                    $('#form_wizard_dn').find('.button-next').hide();
                    $('#form_wizard_dn').find('.button-submit').show();
                    displayConfirm();
                } else {
                    $('#form_wizard_dn').find('.button-next').show();
                    $('#form_wizard_dn').find('.button-submit').hide();
                }
                Mtl.scrollTo($('.page-title'));
            }

            // default form wizard
            $('#form_wizard_dn').bootstrapWizard({
                'nextSelector': '.button-next',
                'previousSelector': '.button-previous',
                onTabClick: function (tab, navigation, index, clickedIndex) {
                    return false;
                },
                onNext: function (tab, navigation, index) {
                    success.hide();
                    error.hide();

                    if (form.valid() == false) {
                        return false;
                    }

                    handleTitle(tab, navigation, index);
                },
                onPrevious: function (tab, navigation, index) {
                    success.hide();
                    error.hide();

                    handleTitle(tab, navigation, index);
                },
                onTabShow: function (tab, navigation, index) {
                    var total = navigation.find('li').length;
                    var current = index + 1;
                    var $percent = (current / total) * 100;
                    $('#form_wizard_dn').find('.progress-bar').css({
                        width: $percent + '%'
                    });
                }
            });

            $('#form_wizard_dn').find('.button-previous').hide();
            $('#form_wizard_dn .button-submit').click(function () {
                // alert('Finished!');
            }).hide();


        }

    };

}();

这里是我的ajax请求：

$(document).ready(function(){
    // handle ajax link within main content
        $('.wo-list').on('click', '.ajaxify', function (e) {
            e.preventDefault();
            Mtl.scrollTop();

            var url = $(this).attr("href");
            var pageContent = $('.wo-list');
            var pageContentBody = $('#form_wizard_dn');

            Mtl.startPageLoading();

            $.ajax({
                type: "GET",
                cache: false,
                url: url,
                dataType: "html",
                success: function (res) {
                    Mtl.stopPageLoading();
                    pageContentBody.html(res);
                    Layout.fixContentHeight(); // fix content height
                    Mtl.initAjax(); // initialize core stuff
                    TableManaged.init();
                    FormWizard.init(); // how to reinit this one ??
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    pageContentBody.html('<h4>Could not load the requested content.</h4>');
                    Mtl.stopPageLoading();
                }
            });
        });

        $('.wo-list-item').click(function(){
            $('.wo-list-item').removeClass('active');
            $(this).addClass('active');
});

我认为FormWizard.init();需要在第二个ajax请求中重置回默认值吗？我怎样才能做到这一点？任何帮助将不胜感激。

ajax成功后jQuery重置init

0 个答案: