如何获取 JQuery-在第 1 步单击 'next' 时调用 ajax 服务的步骤

Question

虽然我需要在单击第一个 'next' 时通过 ajax 调用 c# 服务，但我正在使用 jquery 步骤，是否可以在显示第 2 步？尽管加载了第 2 步后的 ajax 事件 returns，但以下代码仍然有效。

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

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

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

请注意，您有 3 个参数可用，其中之一 - event - 应该是单击的按钮。如果需要，可以使用它来更好地定义您的 url 变量。同样使用 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
               }
           });
       }
    },
});

Answer 2

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

如何获取 JQuery-在第 1 步单击 'next' 时调用 ajax 服务的步骤

How to get JQuery-Steps to call an ajax service when clicking 'next' on step 1

jquery

jquery-steps