How to stay on same wizard on refreshing the page in Jquery-Steps?

Question

I am using jQuery-Steps plugin for my wizard type form. Now I want to stay on same wizard when I refresh the page. How do I do that?

Answer 1

You have to set saveState: true in the options when you initialise jQuery.steps.

eg:

$("#example-basic").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
    saveState: true
});

The saveState option is dependent on jQuery.cookie plugin. Ref: https://github.com/rstaib/jquery-steps/issues/86

It's also important to not that saveState will not work on the local file system, it has to be served from a webserver due to browser restrictions.

---

Resetting the state:

In order to reset state when the wizard is completed you have to use jQuery to click the first step link. You can then hide the wizard and show a custom message so the user is not confused.

$("#example-basic").steps({
    ...
    onFinished: function( a ) {
        $('#example-basic .steps a:eq(0)').click();
        $('#example-basic').hide();
        $('#custom-message').show();
    }
});

This is the only way I've found to reset the state without altering or extending the plugin code.