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

32

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

1,997
2
12
12

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
1

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 19 · Answer 2 · edited Apr 28 '14 at 19:06

19

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

6,873
8
40
54

answered Apr 01 '14 at 02:21

Matthew Friedman

471
1
5
12

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

18

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

19,231
10
57
111

answered Dec 29 '15 at 17:20

Abdul Jamal

346
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

score 16 · Answer 4 · answered Jan 13 '17 at 19:41

16

Check my following implementation, What do you think guys?

$.fn.steps.setStep = function (step)
{
  var currentIndex = $(this).steps('getCurrentIndex');
  for(var i = 0; i < Math.abs(step - currentIndex); i++){
    if(step > currentIndex) {
      $(this).steps('next');
    }
    else{
      $(this).steps('previous');
    }
  } 
};

And you can execute the new method very easy:

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

Regards, Nicholls

answered Jan 13 '17 at 19:41

jdnichollsc

1,223
1
19
36

1

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
1

tried above all, but didn't work for me. this one worked. – mshoaibdev Nov 13 '18 at 07:52

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 3 · Answer 6 · answered Mar 01 '16 at 20:35

3

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

16,729
16
67
115

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 1 · Answer 7 · 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 1 · Answer 8 · edited Nov 17 '20 at 20:18

1

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

28,186
10
88
94

answered Nov 17 '20 at 20:17

Linvincible

21
3

score 0 · Answer 9 · 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 10 · answered Aug 16 '17 at 06:52

0

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,532
1
11
31

score 0 · Answer 11 · 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

6,070
5
41
61

score 0 · Answer 12 · 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 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 Ali Aslam

11
3

Going to a custom step with jQuery-steps

15 Answers15

Linked