jquery steps and ajax

Question

I have a problem with jquery steps plugin.

I created 3 steps; the first is a presentation, the second there'is a form and third is a section for result's form.

<script>

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

$("#example-async").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slide",
    onFinished: function (event, currentIndex) {

    },
    labels: {
        finish: "Register",
        next: "Next",
        previous: "Back",
        loading: "Loading ..."
    },
    enableFinishButton: false,
    saveState: true,
    onStepChanging: function(event, currentIndex, newIndex)
        {
           var move = true;

            if (currentIndex == 1) { // form
                move = false;

                var values = {};
                $.each($('#UserRegisterForm input'), function(i, field) {
                    values[field.name] = field.value;
                });


                $.ajax({
                    type: 'POST',
                    url: "/cakephp/ajax/register_user",
                    data: JSON.stringify(values) ,
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {

                        if (data.result === 'ok') 
                        {                 
                            move = true;

                            $("#example-async").steps("setStep", 2);

                        } else {

                            move = false;
                        }

                    }
                });              

            }               

           return move;

        }
});

When I click on button Next into 2section, i call a perl script and if var "result" is equal "ok" I changed section, else i return error into form. But when I click on button Next, my step does not change!

I have implemented too function into jquery.step. I add a function:

$.fn.steps.setStep = function (step) { 
return _goToStep(this, getOptions(this), getState(this), step);    };

And:

function _goToStep(wizard, options, state, index){
return paginationClick(wizard, options, state, index); }

Where I wrong?

score 0 · Answer 1 · answered Jan 31 '15 at 15:05

As we can see in the documentation:

onStepChanging Fires before the step changes and can be used to prevent step changing by returning false.

Why do you use $("#example-async").steps("setStep", 2);? Just return true and after that StepChanging action will be done automatically.

By the way, I faced with same problem of moving on the specified step using API but I didn't found a solution (I think there is no such function for now, maybe in future versions it will be) and solved this problem by simulating the click on a step button.

$("#<1>-t-<2>").get(0).click(); Where:

<1> - Id of your jQuery Steps body.

<2> - Index of the step you want to move (zero based).

For example:

$("#example-async-t-2").get(0).click(); // Move to the third step

But in your case I think you just need to return true if data.result is ok.

score -2 · Answer 2 · answered May 07 '21 at 19:53

-2

Add

async: false,

To your ajax

answered May 07 '21 at 19:53

Kyree

1

Consider editing your answer to describe how the suggested update would resolve the problem described in the question. – JohnH May 07 '21 at 23:34

jquery steps and ajax

2 Answers2