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?

Fernando Tholl · Answer 1 · 2013-12-19T13:42:47.467

33

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);

edited Dec 19 '13 at 13:42

answered Dec 19 '13 at 13:37

Fernando Tholl

2,587
2
16
14

8

Why don't you submit this as a pull request? – tutuDajuju Dec 19 '13 at 14:00
2

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 – Cristian E. Jan 30 '14 at 11:45
I added this to my steps plugin file, but still complaining and says not yet implemented! Any idea? Thanks – ZAD May 06 '16 at 15:38
2

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. – jeancallisti Jul 02 '18 at 16:52

score 21 · Answer 2 · edited Apr 28 '14 at 19:06

21

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.

edited Apr 28 '14 at 19:06

Santosh Panda

7,235
8
43
56

answered Apr 01 '14 at 02:21

Matthew Friedman

491
1
5
12

score 20 · Answer 3 · edited Jan 25 '17 at 22:34

20

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

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

edited Jan 25 '17 at 22:34

Code Maverick

20,171
12
62
114

answered Dec 29 '15 at 17:20

Abdul Jamal

366
3
6

3

Yes, but the question was about going to a custom step, not the next step. – Michael Scheper Oct 12 '16 at 20:29
This answer may be irrelevant to this question but this helped me for other type of requirement. Please don't remove it. – Shaik Bajivali Sep 26 '19 at 04:53

jdnichollsc · Answer 4 · 2022-12-14T16:21:48.370

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)

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. — jeancallisti, Jul 05 '18 at 08:05

score 5 · Answer 5 · answered Dec 10 '13 at 21:21

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!"); 
};

score 5 · Answer 6 · answered Mar 01 '16 at 20:35

5

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.

answered Mar 01 '16 at 20:35

Manolo

24,020
20
85
130

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. – Benyamin Shoham Jun 10 '18 at 16:46

score 2 · Answer 7 · answered Aug 16 '17 at 06:52

2

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");
}

answered Aug 16 '17 at 06:52

Mohamed Thaufeeq

1,667
1
13
34

score 2 · Answer 8 · answered Dec 03 '18 at 14:31

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

score 2 · Answer 9 · edited Nov 17 '20 at 20:18

2

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

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

edited Nov 17 '20 at 20:18

Suraj Rao

29,388
11
94
103

answered Nov 17 '20 at 20:17

Linvincible

31
4

I highly recommend your solution. Simple and Robust – rebo lavo Feb 13 '23 at 07:53

score 1 · Answer 10 · edited Feb 26 '18 at 16:47

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);
    }
}

score 0 · Answer 11 · edited Jun 21 '17 at 05:03

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
  }
});

score 0 · Answer 12 · answered Jan 08 '18 at 10:41

0

Another simple solution:

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

answered Jan 08 '18 at 10:41

tomloprod

7,472
6
48
66

score 0 · Answer 13 · answered Mar 15 '19 at 08:38

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

score 0 · Answer 14 · edited Nov 21 '19 at 13:55

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);

score 0 · Answer 15 · answered Jul 02 '20 at 11:08

0

This is the simplest solution i found.

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

var tablist_item = 'ef_users_list-t-';

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

answered Jul 02 '20 at 11:08

Usman

162
2
10

Mahesh Barot · Answer 16 · 2021-12-06T13:05:38.933

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() 
    {
    
    }
});

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 .. — Mahesh Barot, Dec 06 '21 at 13:00

Going to a custom step with jQuery-steps

16 Answers16

Linked