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>
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
};
});
});
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" );
}
});
});
Un saludo