1

Continuo con el diseñando un formulario el objetivo que tengo :

  • Agregar producto, mostrar características de dicho producto como lo es cantidad precio, para calcular precio y costo de un determinado producto.(Actualmente funciona).
  • Eliminar o remover el producto si es el caso de que se requiera remover el producto.(No funciona)
  • En base a los productos mostrados calcular total a pagar(Actualmente funciona)
  • Y al final colocar un botón de finalizar para cerrar la compra donde se coloque un cuadro de texto y se solicite la cantidad recibida para mostrar el cambio si es que aplica.

El código que estoy usando para esto es el siguiente:

en la página de visualización:

El código usado para realizar el calculo y la visualización es:

<?php
require_once("admin/dbcontroller.php");

$db_handle = new DBController();
$sql = "SELECT * from sales_oper where 1 order by sales_id ASC";
$faq = $db_handle->runQuery($sql);
?>
<!DOCTYPE html>
<style>
.green-text {
color: #008000;
}
.orange-text {
color: orange;
}
.back-text {
color: black;
}
.font-30{
font-size: 30px;
}
</style>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


    </head>
    <body>
        <div class="alert alert-success" style="display:none;"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope=>Product code</th>
                                <th scope="col">Name</th>
                                <th scope="col">Quantity</th>
                                <th scope="col">Unit price</th>
                                <th scope="col">Total price</th>
                                <th scope="col">Accion </th>
                            </tr>
                        </thead>                        
                        <tbody>


                             <?php
          foreach($faq as $k=>$v) {
          ?>
          <tr id="fila-<?php echo $v['sales_id']; ?>" >
            <th scope="row"><?php echo $v['sales_id']; ?></th>
            <td><?php echo $v['product_id']; ?></td>
            <td><input type="number" class="form-control cantidad" value="1"></td>
            <td><input type="number" class="form-control precio" value="<?php echo $v['price']; ?>" readonly></td>
            <td class="precioTotal"></td>
            <td>

                    <a class="btn btn-secondary delete" href="#" data="<?php echo $v['sales_id']; ?>"><i class="fa fa-remove"></i> Eliminar</a>

            </td>
          </tr>
<?php  } ?>


                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                  <table width="30%" border=1 >
                    <tr><td class="orange-text font-30" >Sub- Total</td><td><div  class="orange-text font-30" id="subtotal"></div></td></tr>
                    <tr><td class="black-text font-30" >IVA</td><td><div  class="black-text font-30" id="iva"></div></td></tr>
                    <tr><td class="green-text font-30">Total</td><td><div  class="green-text font-30" id="total"></div>  </td></tr>
                  </table>                                      

                </div>
            </div>



        </div>        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>        

</body>
</html>


<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<script type="text/javascript">
$(document).ready(function(){

    function actualizarTabla() {
        var cantidades = [];
        var precios = [];
        var preciosTotal = [];

        var total = 0;
        $(".table tbody > tr").each(function(index) {
            var cantidad = Number($(this).find('.cantidad').val());
            cantidades.push(cantidad);

            var precio = Number($(this).find('.precio').val());
            precios.push(precio);

            var total_unitario = cantidad * precio;
            preciosTotal.push(total_unitario);
            $(this).find('.precioTotal').text(total_unitario+' Pesos');
            total += total_unitario;
        });

        document.getElementById("subtotal").innerHTML= number_format(total, 2, '.', ',' )+' Pesos';
        document.getElementById("iva").innerHTML= '0'+0.16+' %';

        document.getElementById("total").innerHTML =number_format(total*1.16, 2, '.', ',' )+' Pesos';
    }

    actualizarTabla();

    $(".table").on('change', function() {
        actualizarTabla();
    });

});


function number_format(number, decimals, decPoint, thousandsSep){
    decimals = decimals || 0;
    number = parseFloat(number);

    if(!decPoint || !thousandsSep){
        decPoint = '.';
        thousandsSep = ',';
    }

    var roundedNumber = Math.round( Math.abs( number ) * ('1e' + decimals) ) + '';
    var numbersString = decimals ? roundedNumber.slice(0, decimals * -1) : roundedNumber;
    var decimalsString = decimals ? roundedNumber.slice(decimals * -1) : '';
    var formattedNumber = "";

    while(numbersString.length > 3){
        formattedNumber += thousandsSep + numbersString.slice(-3)
        numbersString = numbersString.slice(0,-3);
    }

    return (number < 0 ? '-' : '') + numbersString + formattedNumber + (decimalsString ? (decPoint + decimalsString) : '');
}



$(document).ready(function() {
    $('.delete').on('click', function(e) {
        e.preventDefault();
        var parent = $(this).parent().parent().attr('id');

        var item = $(this).attr('data');

        var dataString = 'file='+item;            
        $.ajax({
            type: "POST",
            url: "delete_itemorder.php",
            data: dataString,
            success: function(response) {           
                $('.alert-success').empty();
                $('.alert-success').append(response).fadeIn("slow");              
                $('#'+parent).fadeOut("slow");
                 actualizarTabla();
            }
        });
    });                   
});    





</script>

El apoyo que necesito es para saber como podría eliminar la fila entera ya que en este momento solo se esta desapareciendo el botón eliminar y requiero remover toda la fila entera.

Nota: La eliminación en la tabla de la base de datos la realiza correctamente, sin embargo como he comentado no actualiza el cambio en la pagina.

De antemano gracias por su apoyo.

Saludos

2 respuestas 2

0

Si necesitas eliminar la fila completa pues necesitas eliminar el tag tr que no tiene establecido el atributo ID. Así que podrías modificar el html de la fila a que en lugar del tr solamente podrías ponerlo así:

...
<tr id="<?php echo $v['sales_id']; ?>">
...

Luego en el código del delete sustituir la línea del fadeout por esta:

...
$('#'+parent).fadeOut("slow");
...
3
  • Buen día he modificado como me indicas y sigue sin desparecer la fila. También he actualizado el código en base a tu recomendación arriba para que puedas ver como queda. Commented el 27 dic. 2019 a las 18:20
  • Funciono :) de esta manera: al script $('#'+parent).fadeOut("slow"); con tus mismas indicaciones solo '#'+parent sin la palabra "file-" ,; pero ahora no me esta actualizando el subtotal y total. que podría agregar? o debería crear una nueva pregunta? Commented el 27 dic. 2019 a las 18:25
  • Si no estaba funcionando antes de los cambios de todas formas creo que sí, que mejor puede enfocarse en otra pregunta. Actualicé la respuesta para no usar "fila" que puede ser por supuesto.
    – nilsandrey
    Commented el 27 dic. 2019 a las 18:38
0

Bueno muchas gracias Nilsandrey

AL final he podido lograr el objetivo, con tu idea salio lo demás, dejo el código final para realizar la actualización.

Basta con solo llamar nuevamente a la función: actualizarTabla() después del la siguiente linea indicado:

  $('#'+parent).remove();
            actualizarTabla();

Arriba el código corregido.

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.