在步骤 1 中单击“下一步”时如何让 JQuery-Steps 调用 ajax 服务

Question

虽然我需要在单击第一个“下一步”时通过 ajax 调用 c# 服务，但我正在使用 jquery 步骤，这是否可以在显示第 2 步之前被调用并返回？尽管加载第 2 步后 ajax 事件返回，但以下代码仍然有效。

非常感谢，感谢任何帮助。

Jquery 步骤

http://www.jquery-steps.com/Examples#basic

我注意到这些方法了吗？也许这些就是我需要的

onStepChanging: function (event, currentIndex, newIndex)
onFinishing: function (event, currentIndex)
onFinished: function (event, currentIndex) 

我的 ajax 事件

    $(function () {
        $('a[href="#next"]').click(function () {
            var url = "...";

            $.ajax({
                url: url,
                success: function (response) {
                    // Form fields on second step
                    $("#EmailAddress").val(response.Email);
                    $("#FirstName").val(response.Firstname);
                    $("#LastName").val(response.Lastname);
                },
                error: function () {
                    alert("something went wrong");
                }
            });
        });

    });

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

Answer 2

如果我没记错的话，将 ajax 调用放在 onStepChanging 方法中应该可以工作。

请注意，您有 3 个可用参数，其中之一 - event - 应该是单击的按钮。如果需要，使用它来更好地定义您的url var。还可以使用currentIndex 检测您是否处于第一步。

form.steps({
    onStepChanging: function (event, currentIndex, newIndex)
    {

       if (currentIndex == 0) { //I suppose 0 is the first step
           var url = "..."; 

           $.ajax({
               url: url,
               success: function (response) {
                   // Form fields on second step
                   $("#EmailAddress").val(response.Email);
                   $("#FirstName").val(response.Firstname);
                   $("#LastName").val(response.Lastname);
                   return true;
               },
               error: function () {
                   alert("something went wrong");
                   return false; //this will prevent to go to next step
               }
           });
       }
    },
});