0

Tengo una tabla la cuál me sirve para agregar productos a una venta:

     <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>

Esto no tiene mucho que ver ya que esto lo hace django perefectamente ya que actualmente estoy usando este para tal proyecto.

y este es mi jquery:

   $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
    $(function() {    
        $("#tablaDetalle").on("change", "input", function(){
          var row = $(this).closest("tr");
          var cantidad = parseFloat(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = parseInt(cantidad, 10) * parseFloat(precio);
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

          var total = 0;
            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });
            $('.total').val(total.toFixed(2));

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                    var id0 = parseFloat($fila.find('#id_detalleventa-0-subtotal').val(0));
                })
            });
        });  
      });
</script>

En el cuál mi problema surje al querer editar una venta... porque? porque cuando yo registro hago cambios en los campos(input) por ejemplo el input cantidad y cuando hace ese cambio recién calcula y me funciona hasta el remover ese elemento de la tabla todo perfecto! pero cuando voy a editar una venta y le doy remover a ese elemento... el total no cambia ya que no hay cambios en los input... simplemente estoy removiendo un elemento. Hay otra forma de hacerlo?

1
  • ¿Por qué tienes el controlador de evento que controla el borrado dentro del evento que controla el cambio en el input? De ese modo no se borrará hasta que no se haga un cambio en el input. Simplemente sácalo y ya debería funcionar.
    – Alvaro Montoro
    el 9 feb. 2018 a las 23:10

1 respuesta 1

0

El problema es que estás asociando el controlador del borrado dentro del controlador del cambio en un input, entonces el borrado sólo funcionará después de hacer un cambio en un input y no antes (el comportamiento que describes).

La solución sería mover la asociación del evento para .delete-row fuera del controlador del cambio en input (fuera del $("#tablaDetalle").on("change", "input", function(){) y creo que también tienes que hacerlo de manera delegada (para evitar problemas si el botón se añade de forma dinámica).

Algo como esto (lee los comentarios para detalles):

$(function() {    
    $("#tablaDetalle").on("change", "input", function(){
      var row = $(this).closest("tr");
      var cantidad = parseFloat(row.find("input:eq(2)").val());
      var precio = parseFloat(row.find("input:eq(3)").val());
      var subtotal = parseInt(cantidad, 10) * parseFloat(precio);
      row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

      var total = 0;
        $(".subtotal").each(function () {
            var stval = parseFloat($(this).val());
            total += isNaN(stval) ? 0 : stval;
        });
        $('.total').val(total.toFixed(2));
    });  

    // mueve el código del .delete-row fuera del controlador del input
    // y hazlo delegado (esto creo que es necesario, aunque no estoy seguro)
    $("#tablaDetalle").on("click", '.delete-row', function(){
        // aquí tendrás que volver a leer los valores de las variables usadas (p.e. total)
        var total = $('.total').val();
        var $fila = $(this).parents('tr');
        var valsub = parseFloat($fila.find('input:eq(4)').val());
        new Promise(function(done){
            total -= isNaN(valsub) ? 0 : valsub;
            $('.total').val(total.toFixed(2));
            done();
        })
        .then(function(){
            var id0 = parseFloat($fila.find('#id_detalleventa-0-subtotal').val(0));
        })
    });
});
2
  • Si habia probado de esa manera pero cuando lo pongo afuera no me lo resta y no me refresca el total y puse la variable total fuera de la función de los cambios del input para que sea global y cuando le doy remover el campo lo resta pero doble vez o sea si era 4.50 el valor de ese campo lo resta 2 veces dando asi un -4.50 igual muchas gracias Alvaro !
    – user22415
    el 10 feb. 2018 a las 13:05
  • @PieroPajaresOrihuela actualicé la respuesta. Si no te funcione, crea un ejemplo mínimo verificable para que podamos ver el problema,
    – Alvaro Montoro
    el 11 feb. 2018 a las 21:38

Tu Respuesta

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