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。

结合使用Smart Wizard 4和Ajax和php

1 个答案: