jquery - jQueryスマートウィザード: ajaxを使用してフォームを投稿すると、成功すると次のステップに進まない

Question

を呼び出した後、jQuery スマート ウィザードは次のステップに進みません$("#smartwizard").smartWizard("next"); 。

• Promise でラップされたフォームを送信するには、Ajax が使用されます。
• 成功すると、API は done を返します
• それ以外の場合は、適切にフォーマットされた 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]
        }
    });
});