0

The textfield created via javascript can not do floating text and don't have is-upgraded class. How to implement it correctly?

Example code:

var div_name = document.createElement("div");
div_name.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet");
console.log("Masuk");
componentHandler.upgradeElement(div_name);
console.log("Masuk1");
var p_element = document.getElementsByClassName("container")[0].appendChild(div_name);

var l_name = document.createElement("label");
var t = document.createTextNode("Name:");
l_name.setAttribute("class", "mdl-textfield__label");
l_name.setAttribute("for", "name");
l_name.appendChild(t);
componentHandler.upgradeElement(l_name);
p_element.appendChild(l_name);

var i_name = document.createElement("input");
var t = document.createTextNode("");
i_name.setAttribute("id", "name");
i_name.setAttribute("class", "mdl-textfield__input");
i_name.setAttribute("name", "name");
i_name.setAttribute("type", "text");
i_name.setAttribute("autocomplete", "off");
i_name.appendChild(t);
componentHandler.upgradeElement(i_name);
p_element.appendChild(i_name);
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_blue-blue.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<div class="container">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
    <label for="email" class="mdl-textfield__label">Email:</label>
    <input id="email" name="email" autocomplete="off" class="mdl-textfield__input" type="text">
  </div>
</div>

Thank you.

Garbee
  • 10,581
  • 5
  • 38
  • 41
Christoforus Surjoputro
  • 558
  • 6
  • 17

1 Answers1

0

You need to not upgrade components until their full structure is ready and attached to the document.

A fixed and annotated version is:

var div_name = document.createElement("div");
div_name.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet");
console.log("Masuk");
// Do not upgrade before the complete component is ready
console.log("Masuk1");
var p_element = document.getElementsByClassName("container")[0].appendChild(div_name);

var l_name = document.createElement("label");
var t = document.createTextNode("Name:");
l_name.setAttribute("class", "mdl-textfield__label");
l_name.setAttribute("for", "name");
l_name.appendChild(t);
// Do not upgrade before the complete component is ready
p_element.appendChild(l_name);

var i_name = document.createElement("input");
var t = document.createTextNode("");
i_name.setAttribute("id", "name");
i_name.setAttribute("class", "mdl-textfield__input");
i_name.setAttribute("name", "name");
i_name.setAttribute("type", "text");
i_name.setAttribute("autocomplete", "off");
i_name.appendChild(t);
p_element.appendChild(i_name);

// Update the item with the `mdl-js` identifier *after* it is attached to the DOM.
componentHandler.upgradeElement(div_name);
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_blue-blue.min.css"><script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<div class="container">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
    <label for="email" class="mdl-textfield__label">Email:</label>
    <input id="email" name="email" autocomplete="off" class="mdl-textfield__input" type="text">
  </div>
</div>
Garbee
  • 10,581
  • 5
  • 38
  • 41