Search code examples
javascriptjquerydynamicwizardfuelux

Dynamically update number of FuelUX wizard steps


I'm hoping someone might be kind enough to help me with this. I'm using the FuelUX wizard and looking to dynamically add X number of steps, where X is a number set by the user on the first screen. The extra steps get added fine, except I can't figure out how to let the wizard know it now has a different number of steps to what it started with - so if it started with 3 steps, it still wants to submit the form after step 3, regardless of how many it now has.

Calling $('#MyWizard').wizard() again doesn't seem to work. In the wizard code there's a numSteps variable but it doesn't seem to be possible to access this from outside the class. There's also this solution on an external website from Rob Schmuecker (http://www.robschmuecker.com/dynamic-steps-in-fuel-ux-wizard/) but unfortunately it doesn't work for me, and calling $('#MyWizard').data('wizard', '') as he suggests prevents the wizard from stepping forward at all.

Does anyone have any suggestions/experience with this problem? I'm new to JS, etc., so maybe this is obvious, any help would be much appreciated! The code where I'm adding the steps is below:

var added_questions = 0;
function addStep()
{
  added_questions++;
  $("#end-of-questions-step-marker").before("<li id='#step-marker-q" + added_questions + "' data-target='#q" + added_questions + "'><span class='chevron'></span>Q" + added_questions + "</li>");
  $("#step3").before("<div class='step-pane' id='q" + added_questions + "'><fieldset id='q" + added_questions + "-fieldset' class='col-sm-12'></fieldset></div>");
  $("#q" + added_questions + "-fieldset").append(getQuestionPanel(added_questions));
}

Solution

  • I know you are looking for an answer with FuelUX 2, but in the upcoming version 3 of FuelUX, there is a new method called addSteps which is exactly what you are wanting to do. You might review that code. This is how you add one pane at (zero-index) step 2 in FuelUX 3.0:

    $('#myWizard').wizard('addSteps', index, [
      {
        badge: 'badge-customicon',
        label: 'A Step Label',
        pane: '<div>Content</div>'
      }
    ]);
    

    FuelUX 3 is out.