Buenas tardes compañeros,
Programo un sitio web de Symfony usando el paquete webpack encore para administrar js y css.
Solía trabajar con jquery, que es bastante simple, pero me gustaría evolucionar a javascript puro.
Intento traducir el siguiente código en javascript:
<html> <button class="exercice-class" data-id="x">exercice button</button> </html>cuando un usuario hace clic en el "botón de ejercicio", quiero obtener el valor de identificación de datos para generar una URL
<script> $(function() { $('.exercice-class').on("click", function(e) { e.preventDefault(); let id = $(this).data("id"); let url = "../exercice-class/" + id + "/"; $.get(url, function(data){ $(".container-fluid").append(data); $('#showModal').modal('show'); }); }); }); </script>Luego obtengo el contenido de la URL y lo agrego a la ventana modal
Lo que quiero hacer primero es abrir una ventana modal usando una variable como parámetro.
Segunda pregunta, me gustaría obtener datos de un modal (usando un formulario) y enviarlos a una base de datos. Leí cosas sobre la solicitud asincrónica porque no está muy claro para mí, estoy buscando algo parecido a la solicitud ajax.
Gracias de antemano.!
Juuk
aquí hay un pequeño ejemplo, puedes probarlo
var classbutton = document.querySelector('.exercice-class'); classbutton.addEventListener('click', (e) => { e.preventDefault(); let id = element.getAttribute('id'); let url = "../exercice-class/" + id + "/"; let requete = new XMLHttpRequest(); requete.open('GET', url); requete.send(); requete.onload = function() { if (requete.readyState === XMLHttpRequest.DONE) { if (requete.status === 200) { let reponse = requete.response; document.querySelector('.container-fluid').append(reponse); document.querySelector('#showModal').showModal(); } else { } } } });¡Gracias por su respuesta! Probé tu código y trabajé en él... Esto es lo que hice:
let httpRequest = new XMLHttpRequest(); httpRequest.open("GET", url); httpRequest.send(); httpRequest.onload = function (){ if (httpRequest.readyState === XMLHttpRequest.DONE){ if (httpRequest.status === 200){ let httpResponse = httpRequest.response; console.log(httpResponse); } } }Parece que fetch es una forma más nueva de trabajar con datos desde vanilla. Hice lo mismo que intentamos hacer antes y logré obtener datos.
document.addEventListener('click', function (event) { if (!event.target.closest('.exercice-class')){ return null; } else { event.preventDefault(); let exercice = event.target.closest(".exercice-class"); let dataAttribute = exercice.getAttribute('data-id'); let url = "../exercice-class/" + dataAttribute + "/"; fetch(url) .then(function (response) { return response.text(); }) .then(function (data) { console.log(data) }) .catch(function (error) { console.log(error); }); } });En realidad obtengo el mismo resultado con las dos soluciones... el problema es que obtengo "datos" que no puedo explotar...
Imagina que uso el segundo ejemplo: si trato de hacer:
.then(function (data) { let exerciceData = data.getElementById("#adiv"); document.querySelector('container-fluid').append(exerciceData); document.querySelector('showModal').show();No se puede usar "exerciceData". Modal simplemente no se abre.
Gracias por tu ayuda.