Hola,
estoy teniendo para implementar un cuadro de dialogo con varias pestañas (tabs) en una aplicación. Agradecería si pueden ayudarme.
Cada tab muestra datos que vienen de una consulta a la base de datos con información para el usuario. El primer tab contiene un formulario que el usuario puede editar y el resto de tabs son solo para consulta
Esto sería el código HTML
Código PHP:
<div id="dialog-form" title="Información del suministro">
<div id="tabs">
<ul>
<li><a id="tab1" href="formularioinformacion.html">Información</a></li>
<li><a id="tab2" href="formulariofacturas.html">Consumos</a></li>
</ul>
</div>
</div>
Abro el cuadro de dialogo con tabs y hago una consulta (AJAX) mostrando datos del primer tab. Hasta aquí todo ok.
El problema es cuando cambio de tab, hago la consulta a la base de datos y la respuesta en la consola es correcta pero a veces aparecen los campos en blanco, se carga el fichero formulariofacturas.html antes de recibir los datos.
¿Como puedo solucionar esto? He colocado el script antes del código HTML pero sigue ocurriendo.
Código PHP:
$(document).ready(function() {
$('#tab2').click(function(){
{
//Consulta AJAX a la base de datos
};
});
});
El código que uso para abrir el cuadro con tabs es el siguiente, he notado que cuando cambio de tab el boton cancelar se queda bloqueado...
Código PHP:
$(function() {
$( "#tabs" ).tabs({active:0} );
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
"Actualizar": function() { //Boton para actualizar datos del primer tab. Solo debería aparecer en tab 1
var datos=$("#informacion_form").serialize();
$.ajax(
{
url:"editar.php",
type:"POST",
data:datos,
success:
function(r)
}
}
})
$( this ).dialog( "close" );
},
Cancelar: function() {
$( this ).dialog( "close" );
}
},
cerrar: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
});
Se agradecería cualquier ayuda, si creen que existe alguna forma mas sencilla de hacer las consultas por favor comentenlo
Un saludo