Question

我已经在我的应用程序中实现了智能向导。它具有魅力，但是我面临着ajax的问题。我查看了文档，并在SO上也问到了如何使用ajax集成向导的每个步骤的验证，答案为我指明了正确的方向。现在，我遇到了goForward方法的问题，该问题不是必须的。我一直在寻找一种方法来控制向导（如果ajax响应是对还是错），并且发现了question，建议在ajax成功后使用next方法。该方法在版本4中已弃用，我已经在ajax之后实现了goForward，但是它不起作用。对这个问题有什么建议或解决方法吗？

这是我的实际代码

(function($){

  $(document).ready(function(){

   const wizard = $('#smartwizard');

   if( wizard.length != 0 ){

   wizard.smartWizard({
     showStepURLhash: false,
     useURLhash: true,
     contentCache: false,
     toolbarSettings: {
               toolbarPosition: 'bottom', // none, top, bottom, both
               toolbarButtonPosition: 'right', // left, right
               showNextButton: true, // show/hide a Next button
               showPreviousButton: false, // show/hide a Previous button
            },
            anchorSettings: {
                anchorClickable: false, // Enable/Disable anchor navigation
                enableAllAnchors: false, // Activates all anchors clickable all times
                markDoneStep: true, // add done css
                enableAnchorOnDoneStep: false // Enable/Disable the done steps navigation
            },
    });

    //let okToPass = false;

    wizard.on('leaveStep', function(e, anchorObject, stepNumber, stepDirection){
        window.alert(stepNumber);
        if(stepDirection === 'forward'){
            if(stepNumber === 0){
              var userEmail = $('#creator-email').val();
              localStorage.setItem('email', userEmail);
              $.ajax({
                type: 'POST',
                data: {user_email: userEmail},
                url: 'event/new/user',
                cache: false,
                success: function(response){
                    wizard.smartWizard('goForward');
                    console.log(response);
                    console.log(wizard.smartWizard('goForward'));
                }
              });
            }
            // here is the problem, after the ajax success I'm not able to go to the next step.
            else if(stepNumber === 1){
              //okToPass = false;
              var userCode = $('#creator-code').val();
              localStorage.setItem('code', userCode);
              $.ajax({
                type: 'POST',
                data: {user_code: userCode},
                url: 'event/new/verification',
                cache: false,
                success: function(response){
                  window.alert(response);
                    if( response == 1 ){
                      wizard.smartWizard('goForward');
                      return true;
                    }
                  }
                });
                return false;
              }
// here, the last step, I will subit another form to my php script, didn't tested yet.
              else if(stepNumber === 2){
                var email = localStorage.getItem('email');
// this val inside a readonly input isn't set
                $('#registered-email').val(email);
                var data = $('#final-step').serialize();
                $.ajax({
                  type: 'POST',
                  data: data,
                  url: 'event/new/save',
                  cache: false,
                  success: function(response){
                      window.alert(response)
                      console.log(response);
                  }
                });
                return false;
              }
        }
    });

  } // if(el.length)

  });

}(jQuery));

Ajax无法正常运行后的智能向导goForward

0 个答案: