Handling button mdl-js styling with dynamic innerHTML change

Question

Changing <button> innerHTML seems to deactivate mdl-js-ripple-effect. Use the method mentioned here to dynamically build a new element as the workaround or report this as a bug?

<body>
    <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE
    </button>
</body>

JS:

window.addEventListener("load", () => {
  document.getElementById("myButton").innerHTML = "new value";

});

http://codepen.io/anon/pen/KVvMOE

Tried the componentHandler.upgradeElement(button) on the existing element after setting new html, but as mentioned in the docs it's only good for new ones. Trying to reuse existing elements.

score 2 · Accepted Answer · answered Jan 14 '16 at 11:26

I when the component is parsed and upgraded by the MDL script, a lot of extra attributes are added to the outer node, and extra HTML added inside. That means both that setting the innerHTML will remove some of the necessary markup inside and that the upgradeElement will fail because of the markup that was added to the outer node.

You should try de-upgrading the button with componentHandler.downgradeElements first, then set the innerHTML, then call componentHandler.upgradeElement.

Some untested sample code:

function setText(element,newtext){
    componentHandler.downgradeElements(element);
    element.innerHTML=newtext;
    componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');

drown-grading it twice, before setting innerHTML, seems to work for some reason. now curious why the same `componentHandler.downgradeElements(element);` statement needs repeated 2 times. [new version](http://codepen.io/anon/pen/bEoXPz) — Bryan P, Jan 18 '16 at 06:08
seems like the need to repeat the downgrade twice went away with v1.1.1 — Bryan P, Feb 04 '16 at 04:13

score 0 · Answer 2 · answered Nov 11 '16 at 11:29

I'm having a similar issue. I'm trying to add some card via innerHtml into the page. The card contains a radio button using the class mdl-radio.

Everything seems to work fine, but the radio button doesn't load the style. I'm seeing a simple radio button not the styled one. If I add the card to the page from the beggining the radio button looks OK, as expected.

Any comment is welcome, I'm not sure how to fix this.

     main.innerHTML =  '<!-- CARD PREGUNTA-->\
  <div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet" style="margin: 0 auto; display: none;" id="pregunta_card">\
  <div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">\
  <!-- Contenido -->\
  <div class="mdl-card__supporting-text mdl-color-text--grey-600">\
  <h2 class="mdl-card__title-text" id="pregunta_card_title"></h2>\
  <br>\
  <br>\
  <!-- Radio Button 1 -->\
  <label id="opt1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">\
  <input type="radio" id="option1" class="mdl-radio__button" name="options"/>\
  <!-- intitial state checked using attribute checked  -->\
  <span class="mdl-radio__label" id="option1_value"></span>\
  </label>\
  </div>\
  </div>'

Handling button mdl-js styling with dynamic innerHTML change

2 Answers2

Linked