6

我在我的项目中使用： http ://www.jquery-steps.com/Examples#async。这是一个很好的用于添加向导的 Jquery 插件。

我的问题是关于动态步骤。下一步的内容应该取决于上一步的答案。如何通过 AJAX 调用向我的后端发送其他数据。我的后端将根据该值执行下一步。

我搜索了文档和源代码，但找不到答案。

4

3 回答 3

10

在文档中，它提到了在更改步骤之前触发的事件， https://github.com/rstaib/jquery-steps/wiki/Settings#events

所以你需要做的是在这个事件上添加一个回调函数，并根据当前步骤中选择的内容从服务器检索数据。获取数据后刷新下一步的内容。

必须小心，因为对服务器的调用是异步的，并且在转换到下一步之前会调用 onStepChanging 事件。为了使它对您和您的用户都适用（非阻塞），您需要在下一页上显示加载微调器，直到您从 ajax 调用中获得对服务器的响应，然后通过填充数据来替换微调器的步骤。

于 2013-10-19T10:31:17.527 回答
6

目前有两种实现方式。一个用更多的努力，另一个用更少的努力。但更少的努力也意味着更少的控制——换句话说，jQuery Steps处理显示和隐藏加载消息以及异步调用本身当然。无论如何，第一个解决方案（更少的努力）要求您像以前那样在初始化时添加一个默认的异步步骤。

<div id="wizard">
    <h1>Choose</h1>
    <div>
        <select id="choose">
            <option value="0" selected="selected">default</option>
            <option value="1">extraordinary</option>
        </select>
    </div>
    <h1>Result 1</h1>
    <div data-mode="async" data-url="/rest/service/0"></div>
</div>

然后将一小部分代码添加到像melc提到的 onStepChanging 事件中。此代码应分析上一步的数据，并在必要时删除默认异步步骤，并在相同位置添加一个新的异步步骤，但 URL 不同。

<script>
    $(function()
    {
        var wizard = $("#wizard").steps({
            onStepChanging: function(event, currentIndex, newIndex)
            {
                if (currentIndex === 0)
                {
                    if ($("#choose > option:selected").val() === "1")
                    {
                        wizard.steps("remove", 1);
                        // In this case you could also use add instead of insert
                        wizard.steps("insert", 1, {
                            title: "Result 2",
                            contentMode: "async",
                            contentUrl: "/rest/service/1"
                        });
                    }
                }
                return true;
            }
        });
    });
</script>

melc已经描述了另一种解决方案。

于 2013-10-19T13:01:53.547 回答
0

最后一步是设置“新”空步骤的内容。设置此步骤上下文的最有效方法是什么？DIV 的 ID 是动态生成的，所以我无法选择它们。PS我只能给1个答案加分吗

与 user2779014 有同样的问题。必须使用复杂的选择器来获取正确步骤的向导内容

$.ajax({ url: './Advanced Example Content Loading with AJAX Alternative With More Control.php',
         data: { GenerateContentName: $("#GenerateContentID > option:selected").val() },
         type: 'POST',
         success: function(output) {
                      //Gets the options object (object passed to the steps() function)
                      var options = wizard.data("options");
                      var bodyTag = options["bodyTag"];
                      wizard.children(".content").children(bodyTag).eq(newIndex).html(output);
                  }
});

完整代码： http: //plnkr.co/edit/OyHkcZEBv8Fon3vJv7PZ

请注意，如果不下载完整代码并将其托管在 Web 服务器上，则无法使用完整代码，因为它使用 PHP。

于 2015-05-31T13:09:42.453 回答