CODE：

Question

我遇到了Fuel UX向导的问题。当我按下燃料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变量返回未完成。

我使用的是燃料ux，我对jquery有中级经验，我不知道这是一个很好的方法，或者如何开始在向导的每一步进行ajax验证。

希望有人可以帮助我。

提前致谢！

CODE：

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发布到这个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);
});

FuelUX向导ajax验证

CODE：

HTML：

JS：

PHP：（ ajax发布到这个php ）

1 个答案: