jquery-шаги | отправлять данные на сервер при загрузке содержимого ajax

В настоящее время существует два способа его реализации. Один с большим, другой с меньшим усилием. Но меньшие усилия означают и меньший контроль — другими словами, 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>

Затем добавьте небольшую часть кода к событию onStepChanging, например упомянутому melc. Этот код должен анализировать данные предыдущего шага и при необходимости удалять асинхронный шаг по умолчанию и добавлять новый в том же месте, но с другим 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.

В документации упоминается событие, которое запускается перед изменением шага, https://github.com/rstaib/jquery-steps/wiki/Settings#events

Итак, что вам нужно сделать, это добавить функцию обратного вызова для этого события и получить данные с сервера на основе того, что было выбрано на текущем шаге. Как только вы получите данные, обновите содержимое следующего шага.

Необходимо соблюдать осторожность, поскольку вызов вашего сервера является асинхронным, а событие onStepChanging вызывается перед переходом к следующему шагу. Чтобы он работал правильно как для вас, так и для ваших пользователей (без блокировки), вам нужно отображать счетчик загрузки на следующей странице, пока вы не получите ответ от вашего ajax-вызова на сервер, а затем замените счетчик, заполнив данные шага.

Последним шагом является установка содержимого «нового» пустого шага. Каков наиболее эффективный способ задать контекст этого шага? Идентификаторы DIV генерируются динамически, поэтому я не могу их выбрать. PS Могу ли я поставить баллы только за 1 ответ

Была такая же проблема с пользователем 2779014. Пришлось использовать сложные селекторы, чтобы получить содержимое мастера для правильного шага.

$.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

Обратите внимание, что полный код НЕ работает без его загрузки и размещения на веб-сервере, поскольку он использует PHP.