2

Estoy construyendo mi sitio web con Material Design Lite, el cual depende de lo siguiente:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

Cuando utilizo el formulario tiene un efecto que necesita de JavaScript. Todo carga perfecto si el formulario lo incluyo directamente en el HTML, pero al hacerlo mediante JavaScript deja de funcionar.

Lo que hago es esto:

<a onclick="myFunction()">Get Started</a>

Y mi JavaScript:

function myFunction() {
    document.getElementById('business').innerHTML =  
    `<div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
            <h4>Formulario</h4>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="sample3">
                <label class="mdl-textfield__label" for="sample3">Text...</label>
            </div>
        </div>
    </div>`
};

Este es un ejemplo del efecto que debe hacer el input:

<link href="https://code.getmdl.io/1.3.0/material.min.css" rel="stylesheet"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="mdl-grid">
		<div class="mdl-cell mdl-cell--12-col">
			<h4>Formulario</h4>
			<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
				<input class="mdl-textfield__input" type="text" id="sample3">
				<label class="mdl-textfield__label" for="sample3">Text...</label>
			</div>
		</div>
	</div>

10
  • ¿Ves en la consola "myFunction is not defined"?
    – gugadev
    Commented el 7 feb. 2017 a las 2:40
  • En consola no muestra ningún error Commented el 7 feb. 2017 a las 2:51
  • ¿Cuál es exactamente el efecto que debería hacer el formulario? Ejecutando tu código veo la animación del label, no sé si te refieres a eso.
    – gugadev
    Commented el 7 feb. 2017 a las 2:55
  • Ese efecto debe hacer, pero cuando cargo input mediante JS no hace el efecto... puedes verlo en la siguiente página: goo.gl/dP2OwO Al hacer clic en el boton de la tarjeta se muestra el input cargado desde JS y pierde el efecto... Commented el 7 feb. 2017 a las 3:03
  • @DarwinJoseDeLaRosaDamian tu ejemplo funciona pero cuando lo unes con js deja de funcionar? Commented el 7 feb. 2017 a las 3:15

2 respuestas 2

0

Debes forzar el tratamiento el elemento del DOM que hará de contenedor. Al ser modificado tras cargarse el DOM inicialmente (tras el evento DOMContentLoaded), hay que forzarlo sólo a ese elemento en particular:

function myFunction() {
  var business = document.getElementById('business');
  /* Sólo se necesita si vamos a cambiar el aspecto previo */
  //componentHandler.downgradeElements(business);
  business.innerHTML =
    `<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--12-col">
    <h4>Formulario</h4>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="sample3">
      <label class="mdl-textfield__label" for="sample3">Text...</label>
    </div>
  </div>
</div>`;
  /* Aquí viene la "magia", debemos forzar su tratamiento */
  componentHandler.upgradeElements(business);
};
<link href="https://code.getmdl.io/1.3.0/material.min.css" rel="stylesheet"/>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div id="business">
  <a href="#" onclick="myFunction()">Get Started</a>
</div>

0

Otra opción es ocultarlo, y luego volverlo visible haciendo click

document.getElementById("business").style.visibility = "hidden";
function myFunction() {
     document.getElementById("business").style.visibility = "visible";
    
};
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
Ahora, cuando utilizo el formulario, tiene un efecto que necesita de JS. Todo carga perfecto si el formulario lo incluyo directamente al HTML, pero al hacerlo mediante JS... deja de funcionar.

Lo que hago es esto:
<div id="business">
`<div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col">
            <h4>Formulario</h4>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                <input class="mdl-textfield__input" type="text" id="sample3">
                <label class="mdl-textfield__label" for="sample3">Text...</label>
            </div>
        </div>
    </div>`
</div>

<a onclick="myFunction()">Get Started</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.