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

現在、それを実現する方法は 2 つあります。1 つはより多くの労力で、もう 1 つはより少ない労力で。しかし、手間がかからないということは、制御も少なくなるということです。つまり、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 に答える