Estoy desarrollando un sistema php, mysql y ajax
Tengo mi pagina principal (registros-db.php) donde muestro la tabla con los registros de la bd que obtengo con ajax. este es mi codigo
Código Javascript:
Ver original
function obtener_datos(){ $.ajax({ url: 'consulta-db.php', method: 'GET', success: function(data){ $("#contenido").html(data); } }); } obtener_datos();
mi pagina principal (registros-db.php) solo tiene un div id="contenido" donde carga todo, y un link a una ventana secundaria (form.php) que se abre con la librerira fancybox, donde muestro un formulario para agregar un nuevo registro
envió los datos con ajax con este código
Código Javascript:
Ver original
$("#envia").submit(function(e){ e.preventDefault(); var cedula = $("#cedula").val(); var nombre = $("#nombre").val(); var fecha = $("#fecha").val(); var cargo = $("#cargo").val(); $.ajax({ url: 'insert.php', method: 'POST', data: {cedula: cedula, nombre: nombre, fecha: fecha, cargo: cargo}, success: function(dato){ obtener_datos(); console.log(dato); } }); });
todo bien hasta ahora se muestran y se insertan los registros.
Mi problema viene cuando quiero que al enviar el nuevo registro con ajax me actualice la tabla que está en la ventana padre, sin necesidad de recargar la pagina.
Yo creí que esto seria posible al invocar la función obtener_datos() dentro del success del submit del envió de los datos, como se ve en el código anterior, pero no lo hace y no manda ningún tipo de error la consola.
Cabe mencionar que todo mi código ajax esta en un mismo archivo ajax.js que cargo en las dos paginas. Dejo el codigo completo de este archivo al final.
Que podrá estar pasando, que me falta, que ignoro? les agradezco mucho su ayuda y sus consejos
ajax.js
Código Javascript:
Ver original
$(document).ready(function(){ function obtener_datos(){ $.ajax({ url: 'consulta-db.php', method: 'GET', success: function(data){ $("#contenido").html(data); } }); } obtener_datos(); $("#envia").submit(function(e){ e.preventDefault(); var cedula = $("#cedula").val(); var nombre = $("#nombre").val(); var fecha = $("#fecha").val(); var cargo = $("#cargo").val(); $.ajax({ url: 'insert.php', method: 'POST', data: {cedula: cedula, nombre: nombre, fecha: fecha, cargo: cargo}, success: function(dato){ obtener_datos(); console.log(dato); } }); }); });
gracias de antemano!