CODEWITHSUNDEEP
jquerytwitter-bootstrapwizardfuelux
Gabriel Alack
Gabriel Alack

Reputation: 472

FuelUX Wizard component - how to manually select active step?

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.

Upvotes: 8

Views: 10756

Answers (7)

Akshay Tilekar
Akshay Tilekar

Reputation: 2010

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

Upvotes: 1

antoncom
antoncom

Reputation: 11

$(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.

Upvotes: 1

FlyBot
FlyBot

Reputation: 316

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*.

Upvotes: 9

arao6
arao6

Reputation: 3376

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

Upvotes: 1

ajaristi
ajaristi

Reputation: 982

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>

Upvotes: 0

Vinay Mandadapu
Vinay Mandadapu

Reputation: 21

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

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362350

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.

Upvotes: 3

Related Questions