How to forward steps in jQuery-Steps using javascript

Question

Here is my JS code, I want to use javascript to make my wizard next step but I don't know what code I should write.

$("#wizard").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanging: function(e, currentIndex, newIndex){
    // use ajax to check if something is correct
    var req = ocpu.call("XXX",{},function(session){
    }).done(function(){
      // THIS IS WHERE I NEED CODE TO LET THE #WIZARD TO FORWARD TO NEXT STEP BECAUSE THE FOLLOWING RETURN TRUE WON'T BE WORKING.
    }) 
    // return true;
  }
});

---- Added

I don't think the $("#wizard").steps("next");works in onStepChanging. Example,

HTML:

<div id="wizard">
  <h3>Step-1</h3>
  <section>
  First
  </section>
  <h3>Step-2</h3>
  <section>
  Second
  </section>
</div>

JS:

$("#wizard").steps({
  headerTag: "h3",
  bodyTag: "section",  
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanging: function(e, currentIndex, newIndex){
    console.log(currentIndex) // returns many many 0s but cannot go to 1.
    $("#wizard").steps("next");
  }
})

the jquery steps plugin takes an object as a parameter, not a string. — Nate Anderson, Jul 13 '17 at 22:00
The [documentation](https://github.com/rstaib/jquery-steps/wiki/Methods) reveals that the solution might be `$("#wizard").steps("next")`. — Sebastian Simon, Jul 13 '17 at 22:02
@Xufox looks to be correct to me. Next time, maybe look at the API, especially with there being only 11 methods... — , Jul 13 '17 at 22:04
@Xufox No, I don't think `$("#wizard").steps("next")` works. Please see updated. — WCMC, Jul 13 '17 at 22:30

score 2 · Accepted Answer · answered Jul 13 '17 at 23:21

It almost seems easier to just write this without the Steps library, but in any case, the following should allow this process to work.

Firstly, I used your same HTML, included jQuery and the jQuery Steps plugin, then modified the JS to this:

var validatedStepOne = false;

$("#wizard").steps({
  headerTag: "h3",
  bodyTag: "section",  
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanging: function(e, currentIndex, newIndex){
    if(currentIndex == 0 && !validatedStepOne) {
      $.post('ajax.php', {var: 'expected value'}, function(data) {
        if(data != 0) {
          validatedStepOne = true;
          $('#wizard').steps('next');
        }
        else {
          alert('ERROR, unexpected value');
        }
      });
      return false;
    }
    return true;
  }
});

In the code, you'll notice I have a global variable (validatedStepOne) to store whether the first piece of information has been validated via AJAX. The problem originally is that onStepChanging requires that true be returned to move onto the next step - by calling .steps('next') from inside onStepChanging, we were just recursively calling onStepChanging. This way, it will return false if on the first step and awaiting validation, and if validation is complete or on any other step, it will simply return true (you could add else ifs if you need to use AJAX to validate more and a global variable for each). When the AJAX response comes back, if the value is the expected one, we set the global variable to switch off the AJAX validation for the step, THEN we call .steps('next') to move on to the next one. Make sense?

In this code, you would obviously need to modify the AJAX call, but it should be the same concept - just set the global validatedStepOne variable to true and call .steps('next') after.

EDIT: Just to avoid confusion, I used if(data != 0) because my test AJAX file just returned a 1 (to pretend that 'expected value' was always the value I wanted to see).

How to forward steps in jQuery-Steps using javascript

---- Added

1 Answers1