Mdl-stepper Javascript And HTML

I copied and pasted the code I found here. When I try and step (press continue) it does not want to move, in fact it does nothing. I am using Smarty PHP and putting the JavaScript

Solution 1:

Make sure that you have loaded in this order:

1. Material Design Lite JS.
2. MDL Stepper JS.
3. Your custom JS code.

The scripts should look like:

 <!-- Material Design Lite -->
 <script src="./material.min.js"></script>
 <!-- MDL Stepper component -->
 <script src="./stepper.min.js"></script>
 <script>
   // Your custom code here. 
 </script>

In your custom code, you can do some checks to know where is the problem:

// Select your stepper element.  
var stepperElement = document.querySelector('ul.mdl-stepper');
var Stepper;

// Check if MDL Component Handler is loaded.
if (typeof componentHandler !== 'undefined') {
  // Get the MaterialStepper instance of element to control it.          
  Stepper = stepperElement.MaterialStepper;

  if (Stepper) {
    // Moves the stepper to the next step for test.
    Stepper.next();
  } else {
    // Fail 1.
  }
} else {
  // Fail 2.
}

Fail 1: You have Material Design Lite JS loaded but not the MDL Stepper.

Fail 2: Material Design Lite javascript is not loaded or for another reason MDL componentHandler object is not available globally and you can't use (register and/or upgrade) Stepper component at this point.

Maybe you skipped some part of include CSS & JS or basic usage. Goes to get started page and see one more time.

If any, you could share the message being shown on browser console.

---

UPDATE

I updated the README with more information about basic usage and component handler: https://github.com/ahlechandre/mdl-stepper

Solution 2:

Had the same problem and the solution is : wrap your code in window.addEventListener('load', function ()

<!-- Material Design Lite JS -->
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- MDL Component JS -->
<script defer src="./stepper.min.js"></script>
<script>
  (function () {
    window.addEventListener('load', function () {
      // Your custom code in "onload" callback.
   });
  })();
</script>