mdl-stepper
mdl-stepper copied to clipboard
Published
20 hours ago •
ahlechandre
ahlechandre
MaterialStepper instance is not available for selector: .mdl-stepper#ipet-stepper.
Hi I really need some help getting this to work.
I have followed all the steps yet I keep getting this error MaterialStepper instance is not available for selector: .mdl-stepper#ipet-stepper. I am using mdl version 1.3.0
Here is my code
<script type="text/javascript">
var uid = '{$smarty.session.ipet_user}';
function stylesheet(url) {
var s = document.createElement('link');
s.rel = 'stylesheet';
s.async = false;
s.href = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
function script(url) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
(function () {
stylesheet('https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css');
stylesheet('https://fonts.googleapis.com/css?family=Roboto');
stylesheet('https://fonts.googleapis.com/icon?family=Material+Icons');
stylesheet('./templates/main/user-theme/tpl-files/material.act.css');
stylesheet('plugins/dropzone/dropzone.css');
stylesheet('plugins/stepper/stepper.min.css');
stylesheet('./templates/main/user-theme/tpl-files/style.css');
stylesheet('./templates/main/style/newprofile.css');
stylesheet('plugins/getmdlselect/getmdl-select.min.css');
script('https://code.getmdl.io/1.3.0/material.min.js');
script('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js');
script('https://apis.google.com/js/api:client.js');
script('https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBk99v0F4qkmvxifqOD48YktK-QO-3kopI');
script('./templates/main/user-theme/javascript/google.js');
script('plugins/getmdlselect/getmdl-select.min.js');
script('./templates/main/user-theme/javascript/facebook.js');
script('./templates/main/user-theme/javascript/newprofile.js');
script('./templates/main/javascript/zipcode.js');
script('plugins/stepper/stepper.js');
})();
</script>
<section class="mdl-stepper mdl-cell mdl-cell--12-col">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col">
<!-- markup -->
<ul class="mdl-stepper mdl-stepper--linear mdl-stepper--horizontal" id="ipet-stepper">
<li class="mdl-step mdl-step--editable">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Your Information</span>
<span class="mdl-step__title-message">Edit this step later</span>
</span>
<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">1</span>
</span>
</span>
<div class="mdl-step__content">
</div>
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
</div>
</li>
<li class="mdl-step">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Your Pets</span>
</span>
<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">2</span>
</span>
</span>
<div class="mdl-step__content"></div>
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
</div>
</li>
<li class="mdl-step">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Emergency Contacts</span>
<span class="mdl-step__title-message">Who should we contact if your pet goes missing?</span>
</span>
<span class="mdl-step__label-indicator"><span class="mdl-step__label-indicator-content">3</span>
</span>
</span>
<div class="mdl-step__content"></div>
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
</div>
</li>
</ul>
</div>
</div>
</section>
<script>
(function () {
window.addEventListener('load', function () {
var selector = '.mdl-stepper#ipet-stepper';
// Select stepper container element
var stepperElement = document.querySelector(selector);
var Stepper;
var steps;
if (!stepperElement) return;
// Get the MaterialStepper instance of element to control it.
Stepper = stepperElement.MaterialStepper;
if (!Stepper) {
console.error('MaterialStepper instance is not available for selector: ' + selector + '.');
return;
}
steps = stepperElement.querySelectorAll('.mdl-step');
for (var i = 0; i < steps.length; i++) {
// When user clicks on [data-stepper-next] button of step.
steps[i].addEventListener('onstepnext', function (e) {
// {element}.MaterialStepper.next() change the s```````tate of current step to "completed"
// and move one step forward.
Stepper.next();
});
// When user clicks on [data-stepper-skip] button of step.
steps[i].addEventListener('onstepskip', function (e) {
Stepper.skip();
});
}
// When all steps are completed this event is dispatched.
stepperElement.addEventListener('onsteppercomplete', function (e) {
var toast = document.querySelector('.mdl-js-snackbar');
if (!toast){
console.log("No Toast element available")
return;
}
toast.MaterialSnackbar.showSnackbar({
message: 'Completed Use Case',
timeout: 4000,
actionText: 'Ok'
});
});
})
})();
</script>
The selector works fine which leads me to believe window.load is too early and the dynamically added markup is not quite on the DOM yet, therefore querySelector doesn't locate it. It shouldn't have anything to do with the stepper component as it hasn't been upgraded yet.
Getting same issue .in my case there is no dynamically added markup.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Stepper CSS minified -->
<link rel="stylesheet" href="./stepper.min.css">
<!-- Stepper Javascript minified -->
<script defer src="./stepper.min.js"></script>
</head>
<!-- style -->
<style>
.mdl-stepper > .mdl-step > .mdl-step__content {
background-color: rgba(0,0,0,0.2);
}
</style>
<body>
<!-- markup -->
<ul class="mdl-stepper mdl-stepper--linear" id="demo-stepper-linear">
<li class="mdl-step">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Title of step 1</span>
<span class="mdl-step__title-message">Summarize if needed</span>
</span>
</span>
<div class="mdl-step__content"></div>
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
</div>
</li>
<li class="mdl-step">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Title of step 2</span>
</span>
</span>
<div class="mdl-step__content"></div>
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
</div>
</li>
<li class="mdl-step">
<span class="mdl-step__label">
<span class="mdl-step__title">
<span class="mdl-step__title-text">Title of step 3</span>
</span>
</span>
<div class="mdl-step__content"></div>
<div class="mdl-step__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
Continue
</button>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
Cancel
</button>
</div>
</li>
</ul>
</body>
<!-- scrip -->
<script>
let element = document.querySelector('.mdl-stepper#demo-stepper-linear');
var demoLinear = function (e) {
// Select stepper container element
if (!element) return false;
// Get the MaterialStepper instance of element to control it
let stepper = element.MaterialStepper;
console.log("element"+element);
console.log("element.MaterialStepper==> "+element.MaterialStepper); //UNDEFINED AS OUTPUT
console.log("stepper===>"+stepper); //UNDEFINED AS OUTPUT
let steps = element.querySelectorAll('.mdl-step');
// Just looping and adding listener to event onstepnext to the all steps
steps.forEach(function (step, index, steps) {
// When user clicks on [data-stepper-next] button of step
step.addEventListener('onstepnext', function (e) {
// {element}.MaterialStepper.next() change the state of current step to "completed"
// and move one step forward
});
});
// When all steps is completed this event is dispatched
element.addEventListener('onsteppercomplete', function (e) {
let toast = document.querySelector('#snackbar-stepper-complete');
if (!toast) return false;
toast.MaterialSnackbar.showSnackbar({ message: 'Stepper linear is completed', timeout: 4000, actionText: 'Ok' });
});
};
window.addEventListener('load', demoLinear);
</script>
</html>
Pls Help on this.
I added this bit of code after getting the same error. Add it after opening the script tag before the main function
`// Gets your stepper element added after initial page load. var stepperElement = document.querySelector('.mdl-stepper');
// Upgrades all registered components found in the current DOM.
// This is automatically called on window load.
componentHandler.upgradeAllRegistered();`
Hi, try: init code... ` (function (componentHandler) { ..... var stepperElement = document.getElementById(selector); componentHandler.upgradeElement(stepperElement); ......
})(componentHandler); ` the componentHandler is out context on function
