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]
}
});
});