20

如何根据一些ajax调用的结果控制下一步的移动？data.d 返回一个布尔值

$("#wizard").steps({
            onStepChanging: function (event, currentIndex, newIndex) {
                var move = false;
                if (currentIndex == 2) {
                    move = false;
                    $.ajax({
                        type: 'POST',
                        url: "Reservation.aspx/SomeFunction",
                        data: serializeData({  }),
                        contentType: "application/json",
                        dataType: 'json',
                        success: function (data) {
                            move = data.d;
                            return true;
                        },
                        error: ajaxLoadError
                    });
                }
                return move;
            },
            saveState: true

        });
4

11 回答 11

8 
$.ajax({
    type: 'POST',
    url: "Reservation.aspx/SomeFunction",
    async: false,
    contentType: "application/json",
    dataType: 'json',
    success: function (data) {
       move = data.d;
       return true;
    },
    error: ajaxLoadError
});
于 2013-11-25T23:13:45.960 回答
7

我有同样的问题，我什至想在ajax加载后使用“setStep”来强制执行步骤，然后最新版本的jquery.steps取出了“setStep”..

我最终使用了“next”方法，并且必须使用全局触发器来停止 onChanging 事件的无限循环，简而言之，如果 ajax 返回有效数据，我会强制向导进入下一步，否则，它会停留到当前步骤，这是代码

var $stopChanging = false; 

.... ....

onStepChanging: function (event, currentIndex, newIndex) {
      if ($stopChanging) {
        return true;
      } else {
        items = $.ajax({
        type: 'POST',
        url: "Reservation.aspx/SomeFunction",
        data: serializeData({  }),
        contentType: "application/json",
        dataType: 'json',
        success: function (data) {
            $stopChanging = true;
            wizard.steps("next");
        },
        error: ajaxLoadError
    });
   },
   onContentLoaded: function (event, currentIndex) {
       $stopChanging = false;
   }
}

逻辑是这样的：

  1. 点击“下一步”按钮触发onStepChanging
  2. 默认情况下，设置jquery.steps onStepChanging事件返回false，然后$.ajax调用，如果返回有效数据（成功），调用jquery.steps进入下一步，onStepChanging再次触发，如果无效，什么都不做，停留在当前步骤

每次触发两个 onStepChanging 事件听起来不是一个好主意，但这就是我现在可以拥有的

您可能需要为不同的步数索引行为添加更多条件

于 2017-01-15T23:35:11.607 回答
4

您可以将 Samy 的方法与同步 ajax 请求一起使用

$("#wizard").steps({
    onStepChanging: function (event, currentIndex, newIndex) {
        if (currentIndex == 2) {
            var requestResult = $.ajax({
                type: 'POST',
                url: "Reservation.aspx/SomeFunction",
                async: false,
                contentType: "application/json",
                dataType: 'json',
                error: ajaxLoadError
            });
            return requestResult.responseJSON.Result == "/*your expected value*/"
        }
    },
    saveState: true
});
于 2015-06-24T15:59:39.637 回答
4

如果您不希望 $.ajax() 函数立即返回，请将 async 选项设置为 false：

如果服务器没有响应您的 ajax 调用，则为 Ajax 设置超时，然后它将继续下一个进程。

$("#wizard").steps({
            onStepChanging: function (event, currentIndex, newIndex) {
                var move = false;
                if (currentIndex == 2) {
                    move = false;
                    $.ajax({
                        type: 'POST',
                        url: "Reservation.aspx/SomeFunction",
                        data: serializeData({  }),
                        contentType: "application/json",
                        dataType: 'json',
                        async: false,
                        cache: false,
                        timeout: 30000,
                        success: function (data) {
                            move = data.d;
                            return true;
                        },
                        error: ajaxLoadError
                    });
                }
                return move;
            },
            saveState: true

        });
于 2016-03-11T10:23:25.240 回答
3

我找到了另一种方法来解决这个问题。OnStepChanging仅支持boolean. 有一个拉取请求#232，它正在添加延迟对象的使用。（我也在GitHub 上找到了如何使用延迟对象的方法）我将这个修改后的版本包含到我的项目中，并OnStepChanging像这样使用它：

    var def = $.Deferred();

    $.ajax({
        type: "POST",
        url: url,
        //async: false,
        beforeSend: function (xhr) {
            //ASP CORE Antiforgery token
            xhr.setRequestHeader("RequestVerificationToken",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        failure: function (xhr) {
            failureCallback(xhr);
        }
    }).done(function (response) {
        //Result of server validation
        var responseResult = response.result === "Success" ? true : false;
        // Check response
        def.resolve(responseResult);
        }).fail(function (response) {
            console.log(response);
            return false;
        });

    return def; // This is the Deferred that should be returned and NOT the one from jQuery Ajax

我希望这对其他人有帮助。:-)

于 2019-02-13T07:55:38.147 回答
2 
$("#wizard").steps({
        onStepChanging: function (event, currentIndex, newIndex) {
            var $out= false;
            if (currentIndex == 2) {
                $out= false;
                $.ajax({
                    type: 'POST',
                    url: "Reservation.aspx/SomeFunction",
                    data: serializeData({  }),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {
                        move = data.d;

                        $out = true;
                    },
                    error: ajaxLoadError
                });
            }
            return $out;
        },
        saveState: true

    });

把全局变量 $out!

于 2014-10-15T07:22:41.123 回答
2

我遇到了类似的问题，但我使用的是 parsleyjs 进行验证。你可能会在我的代码中得到一个想法。

我的代码是这样的：

             onStepChanging: function (event, currentIndex, newIndex) {

                 // ======== Code that fails 

                 //var step = $wizard_advanced.find('.body.current').attr('data-step'),
                 //$current_step = $('.body[data-step=\"'+ step +'\"]');                        


                // check input fields for errors
                //$current_step.find('[data-parsley-id]').each(function() {
                    //this adds .md-input-danger to inputs if invalid
                    //there is remote validation occurring here via ajax
                    // async: false
                    //$(this).parsley().validate();
                //});

                // this is executed before ajax validation is finished 
                //return $current_step.find('.md-input-danger').length ? false : true;

                // ======== END of Code that fails 

                // FIX
                // waits on ajax validation to finish before returning
                if( $wizard_advanced_form.parsley().validate() ) {
                    return true;
                } else {
                    return false;
                }
                //FIX                    
            }
于 2016-01-20T13:37:56.327 回答
2

这是经过几次尝试后我可以开始工作的唯一方法，这就是@joe-lu 上面所说的。您只想启动异步调用并返回 false。这将使向导保持在同一步骤上。然后在成功处理程序中，您以编程方式进入下一步。

$("#wizard").steps({
            onStepChanging: function (event, currentIndex, newIndex) {
                if (currentIndex == 2) {
                    //Would be a good idea to start a spinner here!
                    //would be a good idea to disable next button here!
                    $.ajax({
                        type: 'POST',
                        url: "Reservation.aspx/SomeFunction",
                        data: serializeData({  }),
                        contentType: "application/json",
                        dataType: 'json',
                        success: function (data) {
                            //stop spinner here!
                            //programmatically move to next step on success.
                            $("#wizard").steps("next");
                        },
                        error: ajaxLoadError
                    });
                }
                //Prevents natural movement to next step.
                //will be done programmatically
                return false;
            },
            saveState: true
        });
于 2018-01-24T22:41:30.500 回答
2 
var items;

$("#wizard").steps({
onStepChanging: function (event, currentIndex, newIndex) {
    var move = false;
    if (currentIndex == 2) {
        move = false;

        items = $.ajax({
            type: 'POST',
            url: "Reservation.aspx/SomeFunction",
            data: serializeData({  }),
            contentType: "application/json",
            dataType: 'json',
            success: function (data) {
                move = data.d;
                return true;
            },
            error: ajaxLoadError
        });


    }
    return move;
},
saveState: true

});



items.success(function (data) {
//if can log in go to logged in page
if (data.success == true) {
    alert("Working");
    var move = data.d;
    return true;

} else {
    alert("didnt work");
}
// output of data
alert(JSON.stringify(data));
});
于 2016-03-15T15:54:46.867 回答
1 
var is_async_step = false;
$("#wizard").steps({
        onStepChanging: function (event, currentIndex, newIndex) {
            //USED TO SEND USER TO NEXT STEP IS ASYNC REQUEST IS PRESENT - FOR AJAX CALL 
            if (is_async_step) {
                is_async_step = false;
                //ALLOW NEXT STEP
                return true;
            }

            if (currentIndex == 2) {                
                $.ajax({
                    type: 'POST',
                    url: "Reservation.aspx/SomeFunction",
                    data: serializeData({  }),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {
                        move = data.d;

                        //Add below 2 lines for every Index(Steps).                            
                        is_async_step = true;
                        //This will move to next step.
                        $(form).steps("next");
                    },
                    error: ajaxLoadError
                });
            }
             //Return false to avoid to move to next step
             return false;
        },
        saveState: true
    });
于 2018-07-05T12:17:03.910 回答
0

为了避免在ajax响应之前改变步骤，应该注意一些细节。首先，JQuery ajax 是默认异步的，很自然地，在 ajax 向控制器发出请求后，Fuel UX 向导不等待 ajax 响应并执行方法程序，然后等待 ajax 响应它必须使用 ajax 设置“async:false ”。对于使用 Fuel UX 向导和其中的一些方法，例如 on.('change')，我们注意到在逐步移动以避免或继续逐步移动时，我们必须为它可以理解的结果对象返回 true 或 false move 或不是。在我的示例中，我在称为“stepState”的ajax 方法之后使用了一个变量来返回 true 或 false。看看我的例子它对我有用：

$('#fuelux-wizard').ace_wizard().on('change', function (e, info) {
                if (info.step == 1) {
                    if ($('#ConfirmFirstStepInfo').is(':checked')) {
                        return true;
                    }
                    else {
                        return false;
                    }
                } else if (info.step == 2) {
                    if ($('#ConfirmSecondStepInfo').is(':checked')) {
                        var ourObject = {};

                        var stepState = null;
                        $.ajax({
                            type: 'POST',
                            data: ourObject,
                            async: false,
                            contentType: false,
                            processData: false,
                            cache: false,
                            url: '/Controller/Action',
                            success: function (response) {
                                if (response.Success == true) {

                                    stepState = true;
                                    return true;
                                }
                                else {

                                    stepState = false;
                                    return false;
                                }
                            },
                            error: function () {

                                stepState = false;
                                return false;
                            },
                            failure: function () {

                                stepState = false;
                                return false;
                            }
                        });

                        return stepState;
                    }
                    else {

                        return false;
                    }
                } else if (info.step == 3) {
                    if (!$('#validation-form').valid()) 
                    { 
                        return false; 
                    }else{
                        return true; 
                    }
                }
        }).on('finished', function (e) {
            alert('finished!');
        }).on('btn-wizard-next', function (e) {
            //return false;//prevent clicking on steps
            //e.preventDefault();//this will prevent clicking and selecting steps
        });
于 2021-09-23T11:16:43.283 回答