Dynamic steps in Fuel UX Wizard

Dynamic steps in Fuel UX Wizard

Dynamic steps in Fuel UX Wizard


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)

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.

9 thoughts on “Dynamic steps in Fuel UX Wizard

  1. Adam

    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…


  2. Alan


    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.


  3. Keiron

    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.

  4. Bhushan


    $(‘#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

Leave a Reply

Your email address will not be published. Required fields are marked *