4

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));
}
famousgarkin
  • 13,687
  • 5
  • 58
  • 74
user6325
  • 55
  • 6

1 Answers1

2

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.

Interactive Llama
  • 780
  • 4
  • 10