将智能向导 4 与 ajax 和 php 一起使用

Question

我找到了一个有趣的 jquery 插件来创建一个向导，它的名字是 Smart wizard 4。我希望能够在第二步之后停止用户等待，直到插入邀请码，然后从我的 php 脚本验证。谁能建议我实现这一目标的方法？我从来没有使用过这个插件，所以在验证完成之前我不知道如何锁定向导。另外我想添加一个需要在第二步之后完成的表格，任何建议将不胜感激。

更新：

var okToPass = false;

    $('#smartwizard').on('leaveStep', function(e, anchorObject, stepNumber, stepDirection){
        window.alert(stepNumber);
        if(stepDirection === 'forward'){
            if(stepNumber === 0 && !okToPass){
              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){
                    okToPass = true;
                    console.log(response);
                }
              });

            }
            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){
                  console.log(response);
                    if( response === true ){
                      okToPass = true;
                    }
                    else{
                      okToPass = false;
                    }
                  }
                });
                if( !okToPass ){
                  return false;
                }
              }
              if(stepNumber === 2 && !okToPass){
                var email = localStorage.getItem('email');
                $('#registered-email').val(email);
                $.ajax({
                  type: 'POST',
                  data: {user_code: userCode},
                  url: 'event/new/save',
                  cache: false,
                  success: function(response){
                      okToPass = true;
                      window.alert(response)
                      console.log(response);
                  }
                });

              }
        }
    });

我正在测试建议的代码，但我遇到了用户无法在我执行代码时继续执行向导步骤的问题。如果代码正确，向导将不会进入下一步，但如果输入错误的代码，它将阻止用户。有什么建议吗？

Answer 1

在 documentation 中有评论，其中之一有一些代码阻止您继续。以下是我认为可行的方法：

let okToPass = false;
$('#smartwizard').on('leaveStep', (e, anchorObject, stepNumber, stepDirection) => {
    if (stepDirection === 'forward') {
        if (stepNumber === 2 && !okToPass) {
            // async code that calls your php API and updates 
            // okToPass based on the result. 
        } else if (stepNumber === 3 && !okToPass) {
            return false;
        }
    }
    return true;
});

评论中的代码有更多的代码来添加一些颜色和东西。在 ajax 解决之前禁用下一个按钮可能是个好主意，或许可以添加一个微调器。

这绝不会多次请求 ajax，从而缓冲继续进行。如果您希望它重做查询，您需要在第 2 步中删除 !okToPass 并在 ajax 请求之前将其设置为 false。

将智能向导 4 与 ajax 和 php 一起使用

Use Smart wizard 4 with ajax and php

php

ajax

smart-wizard