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

2024-03-07

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

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

Jquery步骤

http://www.jquery-steps.com/Examples#basic 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");
                }
            });
        });

    });

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
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐