Geek Answers Handbook

The hamburger icon does not appear even if I call componentHandler.upgradeDom ();

<header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Navigation --> <nav class="mdl-navigation"> <a class="mdl-navigation__link is-active" href="/">link</a> <a class="mdl-navigation__link is-active" href="/">link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <nav class="mdl-navigation"> <a class="mdl-navigation__link is-active" href="/">link</a> <a class="mdl-navigation__link is-active" href="/">link</a> </nav> </div> <!-- Colored FAB button with ripple --> <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> <i class="material-icons">add</i> </button>

According to http://mdlhut.com/2015/07/where-is-the-mdl-drawer-icon/ it should work as long as I call componentHandler.upgradeDom() after dynamically loading the html. Just to make sure I call updateDom correctly, I added a button to see if the ripple effect has been added. And the button is updated, but the hamburger icon does not appear.

If a hamburger icon appears in the html line.

+6
source share
1 answer

Since you are dynamically loading html, you must run the following inside your init function after loading the DOM . Note that the setInterval function for providing the DOM has enough time to load before executing the componentHandler method

JQuery

  $(document).ready(function() { setInterval(function() { componentHandler.upgradeAllRegisteredElements(); }, 1000); });

DOM API

  document.addEventListener('DOMContentLoaded', function() { setInterval(function() { componentHandler.upgradeAllRegisteredElements(); }, 1000); });
0
source

More articles:


All Articles