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