Agregue JavaScript MDCRipple al botón cargado de Ajax

Habdul Hazeez 12 octubre 2023

JavaScript JavaScript Ajax

Este tutorial le enseñará a agregar MDCRipple a un botón HTML cargado con AJAX. Usaremos MDC a través de sus archivos CSS y JavaScript de UNPKG CDN.

Agregue JavaScript MDCRipple al botón cargado de Ajax

Una solicitud AJAX funciona en un servidor, por lo que puede omitir esta sección si tiene acceso a un servidor en vivo; sin embargo, si no tiene acceso a un servidor en vivo, descargue XAMPP.

Después de instalar XAMPP, ubique la carpeta htdocs en su instalación de XAMPP y cree un directorio de trabajo. Este directorio contendrá el proyecto de ejemplo de código de este artículo.

Nuestro código HTML cargará los archivos MDC CSS y JavaScript de UNPKG CDN. Además, contendrá un elemento <main> compuesto por un HTML <button>.

Este botón tendrá un atributo de evento onclick cuyo valor es una función. Esta función se llama cuando el usuario hace clic en el botón e inicia la solicitud AJAX.

Entonces, el siguiente código es el HTML.

<head>
	<meta charset="utf-8">
	<title>MDC with Ajax</title>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
	<main id="mdc-button-container">
		<button type="button" onclick="loadMDCButton()">CLICK ME</button>
    </main>
</body>
</html>

A continuación, cree y guarde otro archivo HTML en su directorio de trabajo. Puede nombrar el archivo mdc-button.html.

Este archivo contendrá el código para el botón HTML. Además, el botón tendrá nombres de clase MDC.

Por lo tanto, será fácil adjuntar MDCRipple a través de JavaScript. El siguiente es el código para mdc-button.html.

<button class="mdc-button mdc-button--raised">
  <span class="mdc-button__ripple"></span>
  <span class="mdc-button__label">Click for Ripple</span>
</button>

El código JavaScript creará una conexión AJAX y funcionará de la siguiente manera:

Cree una nueva XMLHttpRequest.
Utilice el método onload de XMLHttpRtouest para hacer lo siguiente.
2.1 Obtener el ID del elemento <principal>.
2.2 Establezca su propiedad innerHTML en el texto de respuesta de XMLHttpRequest.
2.3 Adjunte MDCRipple al botón en mdc-button.html.
Abra una solicitud GET al archivo mdc-button.html.
Envíe el mdc-button.html como reemplazo del botón en el elemento <main>.

El siguiente es el código para la función de JavaScript.

function loadMDCButton() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById('mdc-button-container').innerHTML =
        this.responseText;
    mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
  } xhttp.open('GET', 'mdc-button.html', true);
  xhttp.send();
}

El siguiente es el código completo para nuestro proyecto de muestra.

<head>
	<meta charset="utf-8">
	<title>MDC with Ajax</title>
	<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
	<main id="mdc-button-container">
		<button type="button"  onclick="loadMDCButton()">CLICK ME</button>
	</main>
	<script type="text/javascript">
		function loadMDCButton() {
			const xhttp = new XMLHttpRequest();
			xhttp.onload = function() {
				document.getElementById("mdc-button-container").innerHTML = this.responseText;
				mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
			}
			xhttp.open("GET", "mdc-button.html", true);
			xhttp.send();
		}
	</script>
</body>

Producción:

MDCRipple en un botón HTML

Autor: Habdul Hazeez

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

Agregue JavaScript MDCRipple al botón cargado de Ajax

Artículo relacionado - JavaScript Ajax