Going to a custom step with jQuery-steps

Question

I am using a jQuery-steps on my app to for a wizard-like situation. I am having trouble finding out how to change to a custom step though. Any help with this one?

$(function () {
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        enableFinishButton: false,
        labels: {
            next: $('#next').html(),
            previous : $('#previous').html()

        },
        onStepChanged: function (event, currentIndex, priorIndex)
        {
            if( priorIndex == 0) {
                var selected = $('input[name=radio_wizard]:checked', '#radio_wizard').val()
                switch( selected ){
                    case 1:
                        // GOTO 1 
                        break;
                    case 2:
                        // GOTO 2 
                        break;
                    case 3:
                        // GOTO 3 
                        break;
                }
            }
      }
}

How to achieve this?

Scarlatina

Answer 1

I did this so I created this new function:

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

And the call that is not implemented, put this:

$.fn.steps.setStep = function (step)
{

    var options = getOptions(this),
        state = getState(this);

    return _goToStep(this, options, state, step);

};

Just taking advantage of what already existed plugin.

Use:

wizard.steps("setStep", 1);

Squall

Why don't you submit this as a pull request? – Postrider

For all I want to mention to be careful to change the signature from function(index,step) to the function(step) above mentioned by @Fernando Tholl – Stephen

I added this to my steps plugin file, but still complaining and says not yet implemented! Any idea? Thanks – Mccool

Same for me : Inside $.fn.steps.setStep, it says that 'getOptions' is not implemented. I have a hard time picture what is the "this" and the scope of setStep's body, and to which object getOptions is supposed to belong. – Arredondo

Answer 2

I found a simple way to do this. you can use the jquery function

$("#wizard-t-2").get(0).click();

assuming you know what step you want to go to. this example would bring you to the third step of the wizard. use chromes editor to figure out what the exact id is of the step you want to go to.

Piscina

Answer 3

stepsWizard = $("#wizard").steps({
        forceMoveForward : true,
        enablePagination: false,
        titleTemplate : '<span class="number">#index#.</span> #title#'
    });

stepsWizard.steps("next"); // this will send us on next step :-)

Saccharin

Yes, but the question was about going to a custom step, not the next step. – Keown

This answer may be irrelevant to this question but this helped me for other type of requirement. Please don't remove it. – Legman

Answer 4

You can create a custom implementation with a simple loop:

$.fn.steps.setStep = function (step)
{
  var self = $(this);
  var currentIndex = self.steps('getCurrentIndex');
  // Calculates the number of missing steps to get to the desired step
  var missingSteps = Math.abs(step - currentIndex);
  // The method then determines whether to navigate forward or backward to the desired step by checking if the step parameter is greater than the current index
  var direction = step > currentIndex ? 'next' : 'previous';
  // Move forward or backward by one step each time the loop runs, until it reaches the desired step
  for(var i = 0; i < missingSteps; i++){
    self.steps(direction);
  } 
};

And you can execute this new method in the below way:

$("#form").steps("setStep", 4); //based on 0 (set the index)

Chemist

This one seems less elegant than the top answer, but unlike the top answer (which has that "getOptions" issue) it works for me -- using Steps 1.1.0. – Arredondo

tried above all, but didn't work for me. this one worked. – Grater

Answer 5

Based on the documentation, it seems to lack that functionality as of right now:

/*  
 * Sets a specific step object by index.  
 *  
 * @method setStep  
 * @param index {Integer} An integer that belongs to the position of a step  
 * @param step {Object} The step object to change  
 *
 */
$.fn.steps.setStep = function (index, step) 
{
    throw new Error("Not yet implemented!"); 
};

Deletion

Answer 6

Basing on @AbdulJamal answer, I've implemented it for any step:

$(function () {
    var stepsWizard = $("#wizard").steps({
        ...
    });

    // step variable handles current step (from 0)
    for(var i=0; i<step; i++) {
        stepsWizard.steps("next");
    }
});

Note that step variable must be defined and equal or greater than 0.

Imprint

This will trigger the stepping events every step of the way. A way to go directly to the desired step seem like a better solution. – Discolor

Answer 7

I did something like below to get it worked:

stepsWizard = $("#wizard").steps({
    headerTag: "h2",
    bodyTag: "section"
});

var indx = 3;
for (i = 0; i <= indx; i++) {
 stepsWizard.steps("next");
}

Kliman

Answer 8

Created this new function:

function _goToStep(wizard, options, state, index)
{
    return paginationClick(wizard, options, state, index);
}
And the call that is not implemented, put this:

Call that is not implemented, put this:

$.fn.steps.setStep = function (step)
{

    var options = getOptions(this),
        state = getState(this);

    return _goToStep(this, options, state, index); //Index Instead step

};

wizard.steps("setStep", 1);

works just fine

Dowden

Answer 9

take the id of the step you want go and add a trigger!

$("#steps-uid-0-t-1").trigger("click");

Overarch

I highly recommend your solution. Simple and Robust – Metalinguistics

Answer 10

function GotoSpecificStep(action, currentStep, number) {
    try
    {
        var stepsTogo = parseInt(currentStep) - parseInt(number);
        for (i = 1; i <= Math.abs(parseInt(stepsTogo)) ; i++) {
            if (action == "next") {
                $(".btnNext").click();
            }
            else if (action == "prev") {
                $(".btnPrevious").click();
            }
        }
    }
    catch(exception)
    {
        MsgBox(exception.message);
    }
}

Claxton

Answer 11

Adding to the answer above by @FernandoTholl, for clarification, wizard.steps("setStep", 1); goes in onStepChanged

$('#wizard').steps({
  onStepChanging: function (event, currentIndex, newIndex) {
      //blah, blah, blah, some code here
  },
  onStepChanged: function (event, currentIndex, newIndex) {
    $('#wizard').steps("setStep", 3);
  },
  onFinished: function () {
      ///more code
  }
});

Alfalfa

Answer 12

Another simple solution:

var desiredStep = 0;
$("#steps-uid-0-t-" + desiredStep).click();

Karyotype

Answer 13

onInit: function(event) {
        let div = event.currentTarget;
        let lis = div.getElementsByTagName('li');
        // Choose second tab
        // active is just show style, only effective after clicking tag a.
        lis[1].className += ' active';
        $(lis[1]).children('a').click();
    }

Cutie

Answer 14

I did this so I created this new function in jquery.steps.js, is important inserts before the $.fn.steps.setStep function:

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

In jquery.steps.js find the $.fn.steps.setStep = function and replace then with:

$.fn.steps.setStep = function (step)
{

    var options = getOptions(this),
        state = getState(this);

    return _goToStep(this, options, state, step);

};

Use:

wizard.steps("setStep", 1);

Shoup

Answer 15

This is the simplest solution i found.

1. Find your tablist item id (in my case it is '#ef_users_list-t-')
2. Trigger click event

var tablist_item = 'ef_users_list-t-';

var step = 2; // step number to jump to
$(tablist_item+step).trigger('click');

Buchan

Answer 16

jQuery('#multisteps_form').steps(
{
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
   // startIndex:2,

    onStepChanging: function() 
    {
        var myform=jQuery('#multisteps_form').serializeArray();
        
        jQuery.ajax({
                url: ajx_url,
                type: 'post',
                data: 
                {
                    'action':'final_submit_data',
                    myform:myform,
                },
                success: function (form_res) 
                {
                    jQuery('#form_submit').html(form_res);
                }
            });
        
        return true; // Most Important
    },
    onFinishing: function() 
    {
        
    },
    onFinished: function() 
    {
    
    }
});

Brookner

This is Perfectlly working in My System ... Just check sure u will get idea of it.... U need to add CDN Link or custom CDN link For it .. – Brookner