Переход к определенному шагу в мастере форм jQuery - PullRequest
Новая
       19

Переход к определенному шагу в мастере форм jQuery

1 голос
/ 10 ноября 2010

Я использую плагин jQuery 'formwizard' и хочу, чтобы пользователи могли переходить к определенному этапу процесса.

Я думал, что это будет метод 'show': 

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
    });
});

но все, что это делает, это выставляет шаг на экране, не скрывая предыдущий шаг.

Если бы был другой способ скрыть текущий экран перед вызовом 'show', то это было бы идеально.

Домашняя страница плагина Домашняя страница FormWizard

Кто-нибудь знаком с этим плагином и знает, как перейти к определенному шагу, используя метод, а не ссылки из элемента формы?

Ответы [ 3 ]

1 голос
/ 14 февраля 2012

Не забудьте вернуть false для событий элементов, с которыми вы связываетесь ... 

$(function(){
    $("#linkId").click(function(){
        $("#demoForm").formwizard("show","newLocationId");
        return false;
    });
});

Это сработало для меня.

1 голос
/ 15 августа 2012

Я потратил несколько часов, пытаясь заставить это работать сегодня. Использование метода .formwizard("show","new_step") для пропуска шагов мне не помогло. Мне не удалось предотвратить переход к шагу 3 и переопределить шаг 4 моей формы в методе .bind("step_shown",function(){...}), поэтому я использовал подход класса скрытых входных данных «ссылка». Я встроил скрытое поле, когда для бесплатного или платного аккаунта была выбрана определенная радиокнопка (на шаге 2), что означало, что шаг 3 можно было пропустить полностью (для бесплатной учетной записи не требуются платежные реквизиты). Я определил шаг, к которому нужно перейти, используя класс «link» на скрытом вводе.

DOM имеет следующее поле , которое находится в делении текущего видимого шага : 

<input type="hidden" id="jump_to_fourth_step" value="fourthStep">

JavaScript имеет следующее: 

$('input[name="account_type"]').click(function() {
  //add "link" class to jump to last step and hide billing fields in summary
  if($(this).attr("is_free")==true) {
    $("#jump_to_fourth_step").addClass("link");
    $(".billing_info").hide();
  }
  //remove class "link" from input and show billing fields in summary
  else {
    $('#jump_to_fourth_step').removeClass("link");
    $(".billing_info").show();
  }
});

Обратите внимание, что этот код запускается только на шаге 2, поскольку переключатель доступен только тогда. Шаг 3 успешно пропускается при нажатии «Далее» с выбранной бесплатной учетной записью, и если кнопка «Назад» используется на шаге 4, пользователь возвращается к шагу 2. И если пользователь решает, что хочет получить платную учетную запись, и возвращается к шагу 2, чтобы пометить как таковой, скрытый ввод удаляется, еще раз вызывая шаг 3, который будет показан далее (и информация о выставлении счета будет отображаться на сводной странице).

Это плохо документировано, но плагин будет переходить на любой шаг в атрибуте «значение» активного входа на текущем шаге после нажатия кнопки «Далее». Как видно выше, значение равно fourthStep. И, если быть точным, я только что проверил и перепрыгнул через любое количество шагов, и кнопка «Назад» правильно вернет вас в нужное место.

0 голосов
/ 11 января 2011

Вы делаете это правильно, как вы можете видеть из рабочего примера ниже.

пример кода на thecodemine.org

Проблема, с которой вы столкнулись, в большинствеслучаи, связанные с недействительным (X) HTML (и в большинстве случаев видимые только в браузерах на основе webkit).Поэтому на вашем месте я бы попытался очистить HTML-код и посмотреть, исправит ли он это.Используйте валидатор по адресу: _ http://validator.w3.org для проверки HTML.

Надеюсь, это поможет

...