Buenas tardes:
Ya lo hice funcionar y va muy bien, sólo me falta añadirle el validator y la animación típica de AJAX, mientras piensa (aunque va muy rápido
)
He combinado jQuery, con XAJAX y es como mejor funciona.
Para jQuery he utilizado lo siguiente:
Código:
// carga de tabla de datos
if ($("#capaTablaDetalle")) {
$("#capaTablaDetalle").load(xajax_recargaTabla());
}
Supongo que la validación la haré también con jQuery.
Para XAJAX:
Código PHP:
<?php
// instanciamos la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding("iso-8859-1"); // le indica la codificación que debe utilizar
//$xajax->configure(decodeUTF8Input,'true'); // decodifica los caracteres extraños
// ============================================================================================
// -> FUNCIÓN PARA INSERTAR LOS DATOS EN BBDD
function procesarFormPrto($form_entrada) {
extract($form_entrada);
// conectamos con la BBDD
$mysql = new MySQL('localhost','root','','gestionclientes');
$sql = "insert into LM_tmpPresupuestos values ('',
'".$form_entrada["referencia"]."',
'".$form_entrada["detalle"]."',
'".$form_entrada["iva"]."',
'".$form_entrada["precio"]."',
'".$form_entrada["cantidad"]."'
)";
$consulta = $mysql -> consulta($sql);
// se instancia el objeto para recibir la respuesta
$respuesta = new xajaxResponse();
// recargamos la tabla
$respuesta -> loadCommands(recargaTabla());
// devolvemos la respuesta
return $respuesta;
}
// ============================================================================================
// -> FUNCIÓN PARA RECARGAR Y MOSTRAR LA TABLA
function recargaTabla() {
// se instancia el objeto para recibir la respuesta
$respuesta = new xajaxResponse();
// conectamos con la BBDD
$mysql = new MySQL('localhost','root','','gestionClientes');
$sql = "select * from LM_tmpPresupuestos";
$consulta = $mysql->consulta($sql);
$total = $mysql->num_rows($consulta);
ob_start();
if ($total>0) {
// echo "<div class='al_dch borde_punteado'><a href='' onClick='xajax_vaciarTabla();' style='display: inline-block; margin-bottom: 3px;'>[ vaciar tabla ] <img src='images/borrar.png' height='15px' alt='vaciar tabla' title='vaciar tabla' /></a></div>";
echo "<div class='al_dch borde_punteado'><input type='image' src='images/borrar.png' onClick='xajax_vaciarTabla();' title='vaciar tabla' /></div>";
}
?>
<table id="tb_altaPrto">
<thead>
<tr>
<th width="100px">Rf.</th>
<th>Detalle</th>
<th width="40px">Cant.</th>
<th width="30px">IVA</th>
<th width="60px">€/Ud.</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4">Total elementos añadidos:</th>
<th class="al_dch"><?php echo $total; ?></th>
</tr>
</tfoot>
<tbody>
<?php
if($total<1) {
?>
<tr>
<td colspan="5">No hay registrado ningún detalle.</td>
</tr>
<?php
}else{
// Comprobamos total de registros
// echo $total;
// Se inicia el bucle para mostrar el listado
while($resultados = $mysql->fetch_array($consulta)) {
?>
<tr>
<td class="al_ctr"><?php echo utf8_decode($resultados['Referencia']); ?></td>
<td><?php echo utf8_decode($resultados['Detalle']); ?></td>
<td class="al_dch"><?php echo $resultados['Cantidad']; ?></td>
<td class="al_ctr"><?php echo $resultados['IVA']; ?></td>
<td class="al_dch"><?php echo $resultados['PrecioUnitario']; ?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
<?php
// Cerramos la captura del texto
$respuesta -> assign('capaTablaDetalle', 'innerHTML', ob_get_clean());
// devolvemos la respuesta
return $respuesta;
}
// ============================================================================================
// -> FUNCIÓN PARA VACIAR LA TABLA MEDIANTE TRUNCATE
function vaciarTabla() {
// se instancia el objeto para recibir la respuesta
$respuesta = new xajaxResponse();
// conectamos con la BBDD
$mysql = new MySQL('localhost','root','','gestionClientes');
$sql = "truncate table LM_tmpPresupuestos";
$consulta = $mysql->consulta($sql);
// recargamos la tabla
$respuesta -> loadCommands(recargaTabla());
// devolvemos la respuesta
return $respuesta;
}
// ============================================================================================
function limpiaCampos() {
// se instancia el objeto para recibir la respuesta
$respuesta = new xajaxResponse();
// se vacían los campos del formulario
$respuesta -> script("xajax.$('altaDetalle').btnLimpiar.click();");
// devolvemos la respuesta
return $respuesta;
}
// ============================================================================================
// ============================================================================================
// registramos la función xajax
$xajax -> registerFunction("procesarFormPrto");
$xajax -> registerFunction("recargaTabla");
$xajax -> registerFunction("vaciarTabla");
$xajax -> registerFunction("limpiaCampos");
// el objeto xcajax debe procesar cualquier petición
$xajax -> processRequest();
?>
Por último, la llamada desde HTML:
Código HTML:
<!-- Creo capa contenedora para zona inferior -->
<div id="dv_prto">
<h3>Desglose Presupuesto</h3>
<!-- Tabla de detalle. Recoge los valores de la tabla 'lm_tmppresupuestos' -->
<fieldset>
<legend>Artículos Añadidos</legend>
<div id="capaTablaDetalle">
<a name="lnk_tablaDetalle"></a>
</div>
</fieldset>
<!-- Formulario de Registro de detalles. Registra valores en la tabla 'lm_tmppresupuestos' mediante XAJAX -->
<form id="altaDetalle" name="altaDetalle" method="post">
<fieldset>
<legend>Alta de Detalle</legend>
<div>
<label class="etiqueta" for="referencia">Referencia</label>
<input type="text" id="referencia" name="referencia" class="inputfield" />
</div>
<div>
<label class="etiqueta" for="detalle">Descripción</label>
<input type="text" id="detalle" name="detalle" class="inputfield required" />
</div>
<div>
<label class="etiqueta" for="cantidad">Cantidad</label>
<input type="text" id="cantidad" name="cantidad" class="inputfield required inputimporte" /> Uds.
</div>
<div>
<label class="etiqueta" for="iva">Tipo IVA</label>
<input type="text" id="iva" name="iva" class="inputfield required inputimporte" /> %
</div>
<div>
<label class="etiqueta" for="precio">Precio Unitario</label>
<input type="text" id="precio" name="precio" class="inputfield required inputimporte" /> €
</div>
<div class="div_buttons">
<input type="button" onclick="xajax_procesarFormPrto(xajax.getFormValues('altaDetalle')); xajax_limpiaCampos(); return false;" value="añadir detalle" id="anadir" name="anadir" class="buttons" />
<input type="reset" value="limpiar" id="btnLimpiar" name="btnLimpiar" class="buttons" />
</div>
</fieldset>
</form>
</div>
</div> Ahora ando liado haciendo la segunda parte, he montado un procedimiento almacenado que no consigo cargarlo, pero esa es otra historia y corresponde a otro foro. Cuando llegue a casa, buscaré información, porque me da un time out, pero no estoy seguro al 100% de que no tenga algún error.
Un saludo, muchas gracias y espero que les sea de utilidad
