Actualizar datos de tabla dinámica

Lisandro1987 · #1 (**permalink**) 03/07/2012, 09:12

Hola foro. Hasta el momento en muchas ocasiones me ayudaron con otros post, pero ahora necesito ayuda ya que no encontré nada en el foro.

Estoy desarrollando una página en PHP que muestra una tabla dinámica con datos de una bd de MySQL. La cosa es que con un complemento de jQuery puedo editar éstos campos y guardarlos directamente en la base de datos. La celda que se modifica ve los cambios, pero ahora si otras celdas se calculaban con ella no se modifican.

Me explico mejor, supongamos que tenemos la siguiente tabla:

| Costo | IVA | Total |

Donde el 'Total' se calcula multiplicando 'Costo' por 'IVA'

Si por ejemplo, modifico un campo de la columna 'IVA', ese campo sufre los cambios y se guarda en la base de datos con jQuery, pero el campo de 'Total' sigue figurando como antes...

Se entiende?
Cómo podría hacer para que se actualice la tabla?
Usar JavaScript se me complica porque tengo los datos en la base de datos, y tendría que hacer sí o sí una consulta...

Miles de gracias de antemano!

vicram10 · #2 (**permalink**) 03/07/2012, 09:24

el total se calcula directo en la consulta SQL que haces a la BD o lo haces en el cliente?

Lisandro1987 · #3 (**permalink**) 03/07/2012, 10:09

No, lo calculo con PHP:

Código:

<td><?php echo $iva * $precio?></td>

Gracias por tu tiempo :)

vicram10 · #4 (**permalink**) 04/07/2012, 06:40

y no te sera mejor traer ya en la consulta SQL el total?.. asi ya se actualizara de forma automatica.. sino seria agregar con javascript para que vuelva a sumar los nuevos valores y que se refleje el resultado.. con jquery seria facil..

Te dejo un ejemplo con jquery...

index.php

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Recalculo Jquery</title>
</head>
<body>
<form name="fcalculo" id="fcalculo" action="calcular.php" method="post">
    <h2>Nro. 1:</h2>
    <input type="text" name="nro_1" id="nro_1" value="<?php echo !empty($nro_1) ? $nro_1 : ''; ?>" />
    <h2>Nro. 2:</h2>
    <input type="text" name="nro_2" id="nro_2" value="<?php echo !empty($nro_2) ? $nro_2 : ''; ?>" />
    <br />
    <input type="submit" name="btncalcular" id="btncalcular" value="Calcular">
</form>
<br />
<div id="resultado"></div>
<!-- llamamos al jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://projects.ramirezmedina.com/worldnavi/rmi/js/jquery.form.js" type="text/javascript"></script>
<!-- aqui le decimos que queremos hacer -->
<script type="text/javascript">
    $(document).ready(function() { 
        $('#btncalcular').live('click', function(){ 
            $("#resultado").append('<img src="http://projects.ramirezmedina.com/worldnavi/rmi/images/cargando.gif" />');
            $("#fcalculo").ajaxForm({
                target: '#resultado'
            }).submit();            
        });
    }); 
</script>
</body>
</html>

calcular.php

Código PHP:

Ver original<?php
//aca realizamos el calculo para mostrarlo luego
if (isset($_POST['btncalcular']))
{
    $nro_1 = !empty($_POST['nro_1']) ? (int) $_POST['nro_1'] : 0;
    $nro_2 = !empty($_POST['nro_2']) ? (int) $_POST['nro_2'] : 0;
    $calculo = $nro_1 * $nro_2;
    echo '<span style="font-weight:bold;">Resultado:</span>&nbsp;',$calculo;
}
?>

Se debe tener el ultimo jquery.min.js y jquery.form.js