Dynamically adding steps gets an error

[jasonglisson]

Hi there,

I've got the stepper working beautifully. Great work on this!

I'm trying to dynamically add step by clicking a button.

var stepper = document.querySelector('.stepper');
var stepperInstance = new MStepper(stepper, {
    // options
    firstActive: 0, // this is the default
     // Allow navigation by clicking on the next and previous steps on linear steppers.
     linearStepsNavigation: true,
     // Auto focus on first input of each step.
     autoFocusInput: false,
     // Set if a loading screen will appear while feedbacks functions are running.
     showFeedbackPreloader: true,
     // Auto generation of a form around the stepper.
     autoFormCreation: true,
     // Function to be called everytime a nextstep occurs. It receives 2 arguments, in this sequece: stepperForm, activeStepContent.
     validationFunction: null,
     // Preloader used when step is waiting for feedback function. If not defined, Materializecss spinner-blue-only will be used.
     feedbackPreloader: '<div class="spinner-layer spinner-blue-only">...</div>'      
   });  

  var elements = '<div class="step">(...your step goes here...)</div>';

  $('button').click(function () {
    stepperInstance.activateStep(elements);  
  });

This seems to generate an error:

Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of undefined

All other functions seem to work great and I've had no issues thus far. Any guidance on this would be helpful. Thanks so much!

[Kinark]

Hey, @jasonglisson! I'm sorry for that, but there's an error in the docs. In order to add steps, you have to pass an index as the second parameter of activateStep method, like so: stepperInstance.activateStep(elements, 4); So the steps will be added in the postion 4 (the fifth step, since the index is zero-based), in other words, the step(s) will be added before the current fifth step.

I believe, it'll work with this. I'll fix the docs as soon as possible.

Thank you :)

[jasonglisson]

Excellent. That was the missing piece of the puzzle. Really really appreciate the quick response! Thanks so much for your time and help!

[jasonglisson]

Hi there!

I have another question on the subject of the same issue that I was having.

Using this works: stepperInstance.activateStep(elements, 1);

But this only works if I have 2 questions or more it seems. What I am trying to do is have 1 question, and have that question's answer spawn a new question just below it.

I've not been able to get stepperInstance.activateStep(elements, 1); to work with only 1 question visible.

Odd thing is, I can get stepperInstance.activateStep(elements, 0); to work and the new question appears first in the list. But setting that parameter to 1 hasn't worked with only one question.

Thoughts?

[jasonglisson]

I'm also have trouble removing a dynamically created step. Is there a parameter that I'm missing for that?

[Kinark]

Hey!

About the activateSteps: So, the index for new steps are zero based, so to add a new step on the first position, you have to pass 0 as the parameter. However, just noticed a bug here. The way I've built the method, it searches for a step that is in the index you're passing and then adds the new steps before it. However, if you want to add them to the end of the stepper, you just can't.

I'll take a look into it and fix in the next version.

About the deactivateSteps: I believe there is no issues here. How are you using it? Are you passing the added steps as the parameter?

[jasonglisson]

Re: activateSteps - So if there is only one step, that would be step zero. It would make sense that if step zero is adding a step, that step would be step one. Correct? And you're saying that doesn't work if there is only 1 step. I may try a work around with a hidden step or something. Ideas on that?

Re: deactivateSteps - I did get it to work after copying exactly how your had it in your example. Wasn't passing that parameter in the deactivateSteps part, but it does work once I do that. The problem is that the number I'm using as the parameter could change so I'll need to work on that a little.

Thanks so much for your quick feedback and guidance!

[Kinark]

I don't know if a hidden step would work, but maybe it would... I'd have to test, but yours is the only work-around I could think of. I'll fix it as soon as possible!

I'm glad that the deactivateStep worked!

Thanks for using materialize stepper :)

[Kinark]

I'm closing this issue since I'm opening a new one with the actual bug as the main subject.

Feel free to reopen it whenever you want :)