FuelUX Wizard component - how to manually select active step?

Question

I'm not seeing any documentation for this.

How do you manually select which panel is active in the wizard component?

I know it's in there somewhere because you can click on one of the tabs once it's been passed, and navigate back to a previous tab.

score 9 · Accepted Answer · edited Jul 18 '14 at 19:43

9

Yes, you can change wizard step:

$('#MyWizard').wizard('selectItem', { step: step });

UPDATE:

After the last updates now it works with selectedItem

$('#MyWizard').wizard('selectedItem', { step: step });

Note the change from select to selected*.

edited Jul 18 '14 at 19:43

Stephen Ostermiller

23,933
14
88
109

answered Oct 20 '13 at 07:36

FlyBot

196
1
4
8

This was added in after my original inquiry. It's now the standard method of accessing the step tabs. – Gabriel Alack Jan 09 '14 at 22:08
1

I understand. This answer is not for you, but for those who will seek a solution in the future. – FlyBot Jan 19 '14 at 10:34

score 3 · Answer 2 · answered Jun 05 '13 at 09:50

3

I don't think there is a way to directly set the active panel since the upcoming steps are disabled until activated using prev/next.

Once a step has been "activated" you could use jquery to trigger a tab click..

$('[data-target=#step2]').trigger("click");

Here is a working example: http://www.bootply.com/60319 -- If you navigate to the last step (5), there is a link that returns to step 2.

answered Jun 05 '13 at 09:50

Carol Skelly

351,302
90
710
624

1

Nice answer, thanks! I added a GitHub issue to enable this through a more accessible method: https://github.com/ExactTarget/fuelux/issues/194 – Adam Alexander Jun 05 '13 at 10:49

score 2 · Answer 3 · answered Nov 27 '13 at 04:20

2

$('#MyWizard').wizard('selectedItem', { step: currentStep });

answered Nov 27 '13 at 04:20

Vinay Mandadapu

21
2

score 1 · Answer 4 · answered Jun 24 '14 at 23:58

1

I know this question is old, but I wanted to share what worked for me in Fuel FX 2.x:

$('#MyWizard').wizard('selectedItem', { step: YourStepNumber });

E.g.:

$('#wizard1').wizard('selectedItem', { step: 7 });

answered Jun 24 '14 at 23:58

arao6

3,316
5
30
51

score 1 · Answer 5 · answered Dec 10 '15 at 17:55

$(document).ready(function() {
    $('#wizard').wizard();
    $('#wizard').find('ul.steps li').toggleClass('complete', true);

    $('#wizard').on('changed.fu.wizard', function (evt, data) {
        $('#wizard').find('ul.steps li').toggleClass('complete', true);
    });
});

This makes all steps clickable.

Akshay Tilekar · Answer 6 · 2016-04-22T12:41:14.367

1

$('#btnNext').on('click', function()
{
$('#orderWizard').wizard('next');
}

Above Code is for Manually Get the Next Pane for Previous One you can try Belowed One

$('#btnPrev').on('click', function()
{
$('#orderWizard').wizard('previous');
}

edited Apr 22 '16 at 12:41

answered Apr 21 '16 at 12:24

Akshay Tilekar

1,910
2
12
22

score 0 · Answer 7 · answered Jun 10 '14 at 16:44

You can set the "active" class on the li tag and when renders the wizard, the acvite li is marked.

This is a example in symfony:

<li data-target="#step1" class="complete">
  <span class="step">1</span>
</li>
<li data-target="#step2" class="active">
  <span class="step">2</span>
</li>

FuelUX Wizard component - how to manually select active step?

7 Answers7