javascript - FuelUX 向导 ajax 验证

Question

我对 Fuel UX 向导有疑问。当我按下 fuel 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: (ajax post to this php)

  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);
});