0

jQuery 智能向导在调用$("#smartwizard").smartWizard("next"); .

  • Ajax 用于提交包含在 Promise 中的表单。
  • 成功时 Api 返回完成
  • 否则返回格式正确的 html。

在这里,表单验证正在工作。当存在服务器端验证错误时,它也会显示,而成功的 ajax 发布向导不会进入下一步。

$(document).ready(function () {
    var calledAjax = false;  // used to prevent infinte posting loop
    function callAjax(form_data, stepNumber) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'post',
                url: $("#form_" + stepNumber).attr('action'),
                data: form_data,
                beforeSend: function (xhr) {
                    // Show the loader
                    $('#smartwizard').smartWizard("loader", "show");
                }
            }).done(function (res) {
                // if done is returned from api we want to navigate to next
                if (res === "done") {
                    $('#smartwizard').smartWizard("loader", "hide");
                    resolve("done");
                } else {
                    $('#smartwizard').smartWizard("loader", "hide");
                    reject(res);
                }
            }).fail(function (err) {
                // Hide the loader                       
                $('#smartwizard').smartWizard("loader", "hide");
                // Reject the Promise with error message to show as content
                reject("An error loading the resource");
            })
        })
    }

    $("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
        if (stepNumber === 0 && stepDirection === 1) {
            var myForm = $("#form_" + stepNumber);
            var valid = myForm.valid();
            console.log(valid)
            var form_data = $("#form_" + stepNumber).serialize();
            // calledAjax variable was introduced to remove infinite loop
            if (valid && !calledAjax) {
                callAjax(form_data, stepNumber)
                    .then(data => {
                        calledAjax = true;
                        $("#smartwizard").smartWizard("next"); // is not working
                        // $("#smartwizard").smartWizard( "goToStep", stepNumber+1); //also not working
                        //return true;
                    }).catch(error => {
                        // error is returned as html from server side.
                        $('#step-1').html(error);                        
                        console.log(error);
                        return false;
                    });
            }
            return false;
        }
    });

    // Smart Wizard
    $('#smartwizard').smartWizard({
        selected: 0,
        theme: 'progress',
        transition: {
            animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
        },
        toolbarSettings: {
            toolbarPosition: 'both', // both bottom
            //toolbarExtraButtons: [btnFinish, btnCancel]
        }
    });
});
4

0 回答 0