FuelUX Wizard ajax validation

Question

I have a problem with the Fuel UX Wizard. When I press the next button on the fuel ux wizard, I send the category_id selected using validate_step(step) and response with a json object from php.

This first step works fine but when I try to read the result of validate_step(step) function I get an error on the console.

The problem is here:

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

The vrspx variable return undefinied.

I am with fuel ux and I have beginer to intermediate experience with jquery and I dont know if this is a good aproach or how to get started making ajax validations on each step of the wizard.

Hope somebody can help me.

Thanks in advance!

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: (The 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

The issue you're seeing is because the validation decision must be made immediately (synchronously) and cannot be deferred until an AJAX request completes. One strategy for this is to always fail the validation, then handle moving the wizard step from within your validation's ajax callback. Here's a start:

$('#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);
});