FuelUX向导ajax验证

FuelUX Wizard ajax validation

本文关键字:验证 ajax 向导 FuelUX      更新时间:2023-09-26

我的Fuel UX向导有问题。当我按下fuel ux向导上的下一个按钮时,我会发送使用validate_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变量返回undinied。

我是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

您看到的问题是,必须立即(同步)做出验证决定,并且不能推迟到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);
});