FuelUX 向导 ajax 验证

Question

Fuel UX 向导有问题。 当我按下燃料 ux 向导上的下一个按钮时，我发送使用 validate_step(step) 选择的 category_id 并使用来自 php 的 json 对象进行响应。

这第一步工作正常，但是当我尝试读取 validate_step(step) 函数的结果时，我在控制台上收到错误。

问题出在这里：

vrspx = validate_step(step);
console.log('Validation(' + step + ')= ' + vrspx); // CONSOLE : Validation(1)= undefined 
if(vrspx === 'ok'){ ....

vrspx 变量返回未定义。

我是fuel ux，我有jquery的初学者到中级经验，我不知道这是否是一个好的方法或如何开始在向导的每个步骤上进行ajax验证。

希望有人可以帮助我。

提前致谢！

代码：

---

HTML：

<form name="wizard" id="wizard" class="ajax" method="post" action="http://URLBASE/U_wizard/">

<!-- STEP 1 -->

        <div class="step-pane active" id="step1">



    <div class="padd-10 button-holder" id="categories_selector">
    <br>


        <label><input type="radio" id="category_id_1" name="category_id" value="1"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_2" name="category_id" value="2"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_3" name="category_id" value="3"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_4" name="category_id" value="4"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_5" name="category_id" value="5"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_6" name="category_id" value="6"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_7" name="category_id" value="7"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_8" name="category_id" value="8"><i class="radio"></i>...</label>



        <label><input type="radio" id="category_id_9" name="category_id" value="9"><i class="radio"></i>...</label>


    </div>







        </div>

<!-- STEP 2 -->

        <div class="step-pane" id="step2">This is step 2</div>

<!-- STEP 3 -->

        <div class="step-pane" id="step3">This is step 3</div>



        </form>

JS：

var wizard = $('#MyWizard');

function validate_step(step){

    // Get form method and action url

        var that = $('.ajax'),
            url = that.attr('action'),
            type = that.attr('method');

        var data = $('form.ajax').serialize();

    // Ajax


        $.ajax({

                    url: url + step,
                    type: type,
                    data: data,
                    dataType: "json",
                    success: function (response) {

                        console.log(response);

                        if(response.status == 'ok'){

                            // allow change

                            return 'ok';



                        }else{

                            // cancel change

                            return 'notok';

                        }

                    }, // End success
                    error: function () {

                         console.log('AJAX Error');  
                         return 'notok';

                    } // End error

        }); // $.ajax


} // End validate_step


wizard.on('change', function(e, data) {

    console.log('change');

// STEP 1:

    var step = 1;

    if(data.step===step && data.direction==='next') {

        // Hide button next

        vrspx = validate_step(step);
        console.log('Validation(' + step + ')= ' + vrspx);


        if(vrspx === 'ok'){

                // allow change
                console.log('allow change');

             }else{

                // cancel change
                console.log('cancel change');
                return e.preventDefault();

            }




    } // End validate step 1

// STEP 2:

}); // End Wizard.on.change

PHP: (这个 php 的 ajax 帖子)

  if($_SERVER['REQUEST_METHOD'] === 'POST') 
    {



        switch ($value) {

            case $value == '1':
                # Validate STEP 1:

                    $this->log->lwrite('## VALUE 1');

                    foreach ($_POST as $key => $value) {
                        $this->log->lwrite('## $_POST['.$key.']'.$value);
                    }

                    if (isset($_POST['category_id']))
                    {

                        $category = CB_safeSQL($_POST['category_id']);

                        $msg = array('msg' => 'Valid...','status' => 'ok');
                        $this->log->lwrite('## CATEGORY SETED TO '.$category);
                        unset($category);

                        echo json_encode($msg);
                        unset($msg);
                        die();

                    }
                    else
                    {
                        $msg = array('msg' => 'Invalid ...','status' => 'notok');
                        echo json_encode($msg);
                        unset($msg);
                        $this->log->lwrite('## NO category readed');
                    }


                break;

            default:
                # DEFAULT

                    $this->log->lwrite('## DEFAULT VALUE');

                break;
        }


    } // End POST

Answer 1

您看到的问题是因为必须立即（同步）做出验证决定，并且不能推迟到 AJAX 请求完成之前。一种策略是始终使验证失败，然后从验证的 ajax 回调中处理移动向导步骤。这是一个开始：

$('#MyWizard').on('stepclick change', function (e, data) {
    console.log('step ' + data.step + ' requested');

    // Cancel the click to allow
    // validate_step to process
    e.preventDefault();    

    // Perform AJAX validation. The AJAX
    // callback can call $('#MyWizard').wizard('next')
    // or otherwise modify the wizard as appropriate
    validate_step(data.step);
});