I was looking through the jQuery tags on Stack Overflow today when I saw a question about how to add wizard steps dynamically to the wizard widget in Fuel UX. Turns out just as I was about to post an answer the author deleted the question! I emailed him asking if he still needed an answer, to which he thankfully replied yes (not all was in vain)! Since there’s no other guidance about that, I’ve put what I sent back to him here for others to see and hopefully find helpful.
To get dynamic steps in Fuel UX Wizard working:-
The code below works on the example and the source code as originally seen at the Fuel UX github demo page (at time of writing at version 2.6.0)
|
1 2 3 4 5 6 7 8 9 10 11 |
//First off you want to get your current selection for use later. var stepNum = $('#MyWizard').wizard('selectedItem'); //Now we need to remove any data-association to the 'wizard' which was already marked up and instantiated from before as otherwise it won't redraw and reinitialize properly. $('#MyWizard').data('wizard', ''); //Now add new steps $('.step-content').append('<div class="step-pane" id="step6">This is step 6</div>'); $('.steps').append('<li data-target="#step6"><span class="badge">6</span>Step 6<span class="chevron"></span></li>'); $('.step-content').append('<div class="step-pane" id="step7">This is step 7</div>'); $('.steps').append('<li data-target="#step7"><span class="badge">7</span>Step 7<span class="chevron"></span></li>'); //Finally reinstantiate the wizard selecting the step you were on before. $('#MyWizard').wizard({selectedItem: stepNum}); |
For relevance, as the above referenced page is liable to change I will also include the snippet of HTML to which the javascript code above relates.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<h2>Example</h2> Below is a working wizard example. <div class="well wizard-example"> <div id="MyWizard" class="wizard"> <ul class="steps"> <li class="active" data-target="#step1"><span class="badge badge-info">1</span>Step 1</li> <li data-target="#step2"><span class="badge">2</span>Step 2</li> <li data-target="#step3"><span class="badge">3</span>Step 3</li> <li data-target="#step4"><span class="badge">4</span>Step 4</li> <li data-target="#step5"><span class="badge">5</span>Step 5</li> </ul> <div class="actions"><button class="btn btn-mini btn-prev" type="button"> <i class="icon-arrow-left"></i>Prev</button> <button class="btn btn-mini btn-next" type="button" data-last="Finish">Next<i class="icon-arrow-right"></i></button></div> </div> <div class="step-content"> <div id="step1" class="step-pane active">This is step 1</div> <div id="step2" class="step-pane">This is step 2</div> <div id="step3" class="step-pane">This is step 3</div> <div id="step4" class="step-pane">This is step 4</div> <div id="step5" class="step-pane">This is step 5</div> </div> <input id="btnWizardPrev" class="btn btn-mini" type="button" value="prev" /> <input id="btnWizardNext" class="btn btn-mini" type="button" value="next" /> <input id="btnWizardStep" class="btn btn-mini" type="button" value="current step" /> </div> </div> |
I wonder if you could do this dynamically. That is, read in from the DOM what is already there and rewrite it (which hopefully would re-run any dynamic content, i.e re-run Javascript that’s embedded.
Static isn’t much use…
//Adam
Hi Adam,
Thanks for your comment.
This is dynamic, you can add content and mark it up as and when you have added a new wizard. For example
$('#myWizard').wizard()Not sure what you mean if that isn’t it?!
R.
Rob
I could really use some help implementing this. So my set up is very similar to this. The user can choose a number from a select box. Whichever number they choose, that is how many new li will be created. This works great the first time. However, if they go back and change the number, things start to fall apart. The appropriate number of li and divs are created again. However, the next and back buttons don’t seem to be functioning properly. It skips steps. Doesn’t always go to the end. If the first number was two and then changed to 5, usually it will skip to number 3 or 4 and then 5, missing most of the steps.
I don’t think this line is working properly to reset the count/data.
$(‘#MyWizard’).data(‘wizard’, ”);
Any thoughts would be greatly appreciated.
Thanks
Alan
Hi Alan,
Could you perhaps use this jsfiddle.net to make a demo and then I can try and assist. Many thanks,
http://jsfiddle.net/robschmuecker/h2UM9/
R.
Hi Alan after another user stopped by and seemed to have an issue, I’ve made an example here: http://jsfiddle.net/h2UM9/5/
Please let me and others know if it is working as expected.
Thanks,
R.
I’m also struggling with getting this to work! Was any solution reached here Rob? Was delighted to find this post of yours but unfortunately $(‘#MyWizard’).data(‘wizard’, ”); seems to prevent the wizard from moving to the next step at all in my code. Frustrating as the only issue is the wizard not knowing how many steps it now has – I can see a numSteps variable inside the class but it doesn’t seem to be accessible from outside.
Hi Keiron,
Not sure what the issues are, here is an example of adding dynamic steps and keeping the currently selected step etc.
Let me know if it helps you! http://jsfiddle.net/h2UM9/5/
Thanks,
R.
Thanks Rob great example, this looks like it should do the trick. Appreciate your reply.
Hi,
$(‘#MyWizard’).data(‘wizard’, ‘ ‘);
I am getting issues when using above line of code with fuelux wizard plugin
change event is firing twice when i am adding step and step-content dynamically
can u please help me any one