0

Estoy realizando una aplicación con HTML5, CSS3 y JavaScript el cual es un panel administrador.

Actualmente estoy haciendo la parte de generar una orden, por lo que muestro mis productos de la siguiente forma:

introducir la descripción de la imagen aquí

Para poder generar la orden con múltiples productos tengo una tabla en la que se van a ir agregando conforme la persona presione el + en las cards. Esta es la tabla: introducir la descripción de la imagen aquí

Mi problema surge cuando quiero agregar los datos de mi producto a mi tabla, ya que los botones ya no tienen el evento asociado. Podrian pensar que simplemente tome el valor desde el elemento, pero estoy trabajando con MYSQL, por lo que queria hacer es pasar el ID del producto por la URL, hacer un select a mi tabla con dicho ID y despues hacer echo en mi tabla mediante JS mediante variables de php, pero con esta event.preventDefault() no puedo realizarlo.

Me gustaria saber si alguien me pudiera ayudar a resolver este problema. Gracias de ante mano.

Por si les sirve este es el código del JS: (muchos de los valores eran de prueba para verificar que JS si agregaba los datos a la tabla, los cuales vienen de un formulario)

<?php foreach($resultado as $producto){?>
<script>

    const buttons = document.getElementsByClassName('plus');

    for (i = 0; i < buttons.length; i++) {

        buttons[i].addEventListener("click", function (event) {

            event.preventDefault();

            let orderFormData = new FormData(form);
            let orderTableRef = document.getElementById("sampleTbl");
            let newOrderRowRef = orderTableRef.insertRow(-1);

            $("#sampleTbl tr:last-child()").addClass("fila");

            let newTypeCellRef = newOrderRowRef.insertCell(0);
            newTypeCellRef.textContent = "<?php  echo $producto['PrecioCompra_Producto'] ?>";

            newTypeCellRef = newOrderRowRef.insertCell(1);
            newTypeCellRef.textContent = orderFormData.get("dirOrder");

            newTypeCellRef = newOrderRowRef.insertCell(2);
            newTypeCellRef.textContent = orderFormData.get("puntosOrder");

            newTypeCellRef = newOrderRowRef.insertCell(3);
            newTypeCellRef.textContent = orderFormData.get("emailOrder");

            let newDeleteCell = newOrderRowRef.insertCell(4);
            let deleteButton = document.createElement("button");
            $(deleteButton).addClass('btn btn-danger');
            deleteButton.textContent = "Eliminar";
            newDeleteCell.appendChild(deleteButton);

            deleteButton.addEventListener("click", (event) => {

                event.target.parentNode.parentNode.remove();

            })

            form.reset();

        }

</script>
<?php }?>

7
  • No entiendo que es lo que intentas hacer. Y la verdad tu código tampoco tiene mucho sentido. Cuando dices "ya que los botones ya no tienen el evento asociado" esto generalmente pasa cuando agregas nuevos botones con javascript y antes los asociaste con un addEventListener, por eso es mejor colocar en el mismo html la propiedad onclick, pero tampoco estoy seguro si te refieres a eso. Luego si te molesta el preventDefault(), por qué no se lo sacas??.
    – Yussef
    el 23 oct. 2022 a las 2:41
  • Gracias por tu respuesta. No puedo sacar el preventDefault() porque es el que evita que se recargue la pagina cada vez que se agrega una fila. Para que se entienda mejor, los botones + estan asociados a una funcion que agregan una fila a la tabla, por lo que quiero hacer es asociar cada uno de los cards de producto a su ID de la base de datos, para que de esta forma pueda hacer un select con dicho ID e ingresar esos datos a la nueva fila en la tabla. Entonces, para resumir, quiero que el botón + agregue una nueva fila y que también me agregue los valores del producto a dicha fila (sig) el 23 oct. 2022 a las 2:57
  • por lo que se me ocurrio fue pasar el ID del producto por la url y tomarlo con el metodo GET, el problema es que tengo el preventDefault(), por lo que no puedo realizar dicha accion. Entonces, me gustaria saber si hay otra forma para pasar dicho ID. Si no me entiendes agradecería que me lo indicaras para poder buscar otra forma de indicarte lo que busco. el 23 oct. 2022 a las 2:58
  • Un botón no debería recargar la página a menos que tú quieras que pase eso. Quizás ahí está tu problema. En algunos navegadores hace eso cuando no le colocas el type="button", pero como no colocaste ese código no me es posible saberlo.
    – Yussef
    el 23 oct. 2022 a las 3:03
  • No es un button, es una etiqueta <a></a> en la cual quiero pasarle el ID de mi producto con href de la siguiente forma: href="?producto=<?php echo $dato['ID_Producto']?>", pero cuando presiono la etiqueta me recarga la pagina y me borra la fila agregada, pero si pasa el valor. Pero si coloco el prevent no se recarga la pagina pero el valor no lo pasa. el 23 oct. 2022 a las 3:09

1 respuesta 1

0

Yo lo haría de la siguiente manera. Te aclaro que esto es solo un ejemplo.

La idea generar es que cuando creas el modal, ya que buscas los datos en base de datos, también traigas los datos necesarios para llenar la tabla. Estos datos se incluirán como parámetro en el botón agregar.

  1. Confección del modal

En el modal, luego de agregar los datos que ya muestras, como la foto y el nombre del producto. Agregas el botón +, e incluyes como parametro los datos necesarios: Código, nombre, precio, etc

<?php foreach($resultado as $p) : ?>

   <?php //aquí tu código html donde pones la foto y el nombre.  ?>

   <?php //Y en tu botón "+";  ?>
   <a onclick="agregarProducto('<?php echo $p["codigo"]; ?>', '<?php echo $p["nombre"]; ?>',<?php echo $p["precio"]; ?>, etc )></a>
<?php endforeah; ?>
  1. Luego creas tu función agregarProducto en javascript

Evidentemente, donde dice etc, tu colocas el resto de los parametros para completar los datos de tu tabla.

function agregarProducto(codigo, nombre, precio, etc)
{
     $("#sampleTbl tbody").append(`
<tr>
<td>${codigo}</td>
<td>${nombre}</td>
<td>${precios}</td>
<td><button onclick="eliminar(this)>Eliminar</button>"</td>
</tr>
`);

}

function eliminar(elemento)
{
  $(elemento).parent().parent().remove();
}

No sé si habrá quedado claro, espero te sirva. Cualquier duda me comentas

4
  • Funciona a la perfeccion! Gracias. Ahora una pregunta, como podria mantener siempre un row en donde vaya a mantener el total de los productos agregados? Es decir, que los row que se vayan agregando se inserten en medio y no al final el 23 oct. 2022 a las 13:53
  • @AlexanderQuinteros Si te funciona deberías marcar la respuesta como aceptada para que la comunidad lo sepa, gracias. Si tienes nuevas preguntas sírvete en formularlas, pero no amplies la actual porque desincronizas la pregunta y la respuesta y al final no se entiende nada por parte de los nuevos visitantes a la pregunta.
    – masterguru
    el 23 oct. 2022 a las 14:34
  • Gracias por recordarme, se me había olvidado marcar la respuesta. Veré si puedo solucionarlo por mi cuenta y si no lo logro recurriré a otra pregunta el 23 oct. 2022 a las 14:53
  • @AlexanderQuinteros Muchas gracias :-)
    – masterguru
    el 23 oct. 2022 a las 17:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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