0

Estoy trabajando en un pequeño proyecto, y tengo una tabla que se llena dinámicamente con información de una base de datos, a través de Ajax.

La información de esta tabla, es la información de los productos y sus respectivas cantidades que serán añadidas en una factura.

Tengo un botón "Agregar" que manda la información del producto y su cantidad a la base de datos, y el conjunto de esa información es la que se retorna a la tabla.

Lo que me gustaría saber es si hay alguna manera de que solo se recargue la información de la tabla al momento de agregar un nuevo producto a esta, ya que la única forma de que se me actualice la información es recargando totalmente la pagina, y me gustaría evitar esta situación.

Esta es la tabla donde mando a llamar esa información:

<table class="table table-striped mt-3">
      <thead>
      <tr>
      <th class="text-center">Codigo del Producto</th>
      <th class="text-center">Descripcion</th>
      <th class="text-center">Precio Unitario</th>
      <th class="text-center">Cantidad</th>
      <th class="text-center">Precio Total</th>
      </tr>
      </thead>
      <tbody id="tbody-tabla-temp">

      </tbody>
      </table>

Esta es la funcionalidad del boton agregar:

$('#btn-agregar-producto-detalle-temp').click(function(){

    var parametros = "idProducto=" + $('#slc-productos-factura').val() + "&&" + "cantidad=" + $('#cantidad-producto-factura').val();

    $.ajax({
        url: "ajax/api.php?accion=agregar-producto-tabla-temporal",
        method: "POST",
        data: parametros,
        dataType: "json",
        success:function(respuesta){
            alert('Producto añadido exitosamente');
        },
        error:function(e){
            console.log(e)
        }
    });
});

Y este es el ajax donde mando a llamar toda la información:

$.ajax({
    url: "ajax/api.php?accion=ver-productos-tabla-temporal",
    method: "GET",
    dataType: "json",
    success:function(respuesta){
        for(var i=0;i<respuesta.length;i++){
            var totalProducto = (respuesta[i].precioVenta * respuesta[i].cantidad);

            $('#tbody-tabla-temp').append(
                '<tr>'+
                '<th class="text-center">'+respuesta[i].idProducto+'</th>'+
                '<th class="text-center">'+respuesta[i].nombre+'</th>'+
                '<th class="text-center">'+respuesta[i].precioVenta+'</th>'+
                '<th class="text-center">'+respuesta[i].cantidad+'</th>'+
                '<th class="text-center">'+totalProducto.toFixed(2)+'</th>'+
                '<th class="text-center"><button type="button" class="btn btn-danger" 
                 onClick="eliminarProductoTemp('+respuesta[i].idProducto+')">Eliminar</button></th>'+
                '</tr>'
            );
        }

    }
});

1 respuesta 1

0

En tu función agregar después de :

alert('Producto añadido exitosamente');<br>

Coloca todo tu ajax de listado en una funcion list_table();

y lo llamas después de agregar:

alert('Producto añadido exitosamente');
list_table();
1
  • Intente realizar tu propuesta, pero al momento de que quiero agregar otro produto, se vuelve a repetir el primero. Lo interesante es que si recargo la pagina, solo me aparecen los dos productos y no me aparece el primero repetido Commented el 21 may. 2020 a las 21:01

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.