jquery шаги и ajax

Question

У меня проблема с плагином jquery шагов.

Я создал 3 этажа; первая - презентация, вторая - форма, а третья - раздел для формы результата.

<script> 

function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

$("#example-async").steps({ 
    headerTag: "h3", 
    bodyTag: "section", 
    transitionEffect: "slide", 
    onFinished: function (event, currentIndex) { 

    }, 
    labels: { 
     finish: "Register", 
     next: "Next", 
     previous: "Back", 
     loading: "Loading ..." 
    }, 
    enableFinishButton: false, 
    saveState: true, 
    onStepChanging: function(event, currentIndex, newIndex) 
     { 
      var move = true; 

      if (currentIndex == 1) { // form 
       move = false; 

       var values = {}; 
       $.each($('#UserRegisterForm input'), function(i, field) { 
        values[field.name] = field.value; 
       }); 


       $.ajax({ 
        type: 'POST', 
        url: "/cakephp/ajax/register_user", 
        data: JSON.stringify(values) , 
        contentType: "application/json", 
        dataType: 'json', 
        success: function (data) { 

         if (data.result === 'ok') 
         {     
          move = true; 

          $("#example-async").steps("setStep", 2); 

         } else { 

          move = false; 
         } 

        } 
       });    

      }    

      return move; 

     } 
}); 

При нажатии на кнопку Далее в 2section, я называю PERL скрипт, и если переменная «результат» равно «ОК» Я изменил раздел, иначе я вернуть ошибку в форму. Но когда я нажимаю кнопку «Далее», мой шаг не меняется!

Я также внедрил функцию jquery.step. добавить функцию:

$.fn.steps.setStep = function (step) { 
return _goToStep(this, getOptions(this), getState(this), step); }; 

И:

function _goToStep(wizard, options, state, index){ 
return paginationClick(wizard, options, state, index); } 

Где я неправ?

Answer 1

Как мы можем видеть в документации:

onStepChanging Пожаров перед стадией изменений и могут быть использованы для предотвращения шага изменения, возвращая ложным.

Почему вы используете $("#example-async").steps("setStep", 2);? Просто верните true и после этого действие StepChanging будет выполнено автоматически.

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

$("#<1>-t-<2>").get(0).click(); Где:

< 1> - Идентификатор вашего тела JQuery шаги.

< 2> - Указатель шага, который вы хотите переместить (на основе нуля).

Например:

$("#example-async-t-2").get(0).click(); // Move to the third step

Но в вашем случае я думаю, вам просто нужно вернуть true если data.result нормально.