Llamar funcion Ventana Padre desde Hija (iframe)

[rfadgrmm]

Hola, que tal? Tengo un proyecto en el que involucran PHP, JQuery, Underscore (para generar plantillas) y OrangeBox. Estoy tratando de actualizar un DIV que muestra inicialmente el listado de usuarios, cuando carga la página lo hace a través de esta función...

Código Javascript:

//VENTANA PADRE...
function CargaTabla() {
    var params = { "comando" : "ver-listado" }
    $.ajax({
        data: params,
        dataType: 'json',
        url: "http://miweb.dev/op-usuarios/cmd/usuarios",
        type: "post",
        beforeSend: function() {
            $("#CargandoID").css("display", "inline");
        },
        success: function(respuesta) {
            var datos = {"datos" : respuesta };
            var compilado = _.template($("#MostrarListaID").html());
            $("#CargandoID").css("display", "none");
            $("#ListadoUsuariosID").html(compilado(datos));
            $("#TablaUsuariosID").tablesorter({ sortList: [[1,0]], headers: { 0: {sorter: false}}, widgets: ['zebra'] });
        }
    });
}
$("#TablaUsuariosID").load(CargaTabla());
 

Código HTML:

<!-- VENTANA PADRE... -->
<table id="TablaUsuariosID" class="tablesorter">
	<thead>
		<tr>
			<th style="width: 10%;">&nbsp;</th>
			<th style="width: 36%;">Nombre Completo</th>
			<th style="width: 14%;">ID Usuario</th>
			<th style="width: 18%;">Perfil Asignado</th>
			<th style="width: 14%;">Actualización</th>
			<th style="width: 8%;">Estado</th>
		</tr>
	</thead>
	<tbody id="ListadoUsuariosID">
	</tbody>
</table>
<script type="text/template" id="MostrarListaID">
	<% for (var i = 0; i < datos.length; i++) { %>
	<tr>
		<td><% print(datos[i].ID); %></td>
		<td><% print(datos[i].ApeNombre); %></td>
		<td><% print(datos[i].Usuario); %></td>
		<td><% print(datos[i].Perfil); %></td>
		<td><% print(datos[i].Actualizado); %></td>
		<td><% print(datos[i].Estado); %></td>
	</tr>
	<% } %>
</script> 

Tengo un formulario que se abre en una ventana hija IFRAME (OrangeBox) para agregar usuario, el cual me funciona a la perfección, con todos sus filtros. Quisiera llamar a la función CargaTabla(), que está declarada en la ventana padre, una vez que le haga click en "Guardar Cambios", desde la ventana hija.

Código HTML:

<!-- VENTANA PADRE... -->
<p class="P02B"><a href="http://miweb.dev/op-usuarios/usuario-nuevo?iframe" id="usuario-nuevo-link" class="ui-state-default ui-corner-all" data-rel="lightbox[usr-new]"><span class="ui-icon ui-icon-plusthick"></span>Nuevo Usuario</a></p> 

Código Javascript:

//VENTANA HIJA...
$("#guardar-cambios-link").click(function(e) {
    e.preventDefault();
        parent.location.reload(); //FUNCIONAL, PERO ME RECARGA TODA LA PAGINA...
    }
});
 

Probé con parent.location.reload(), pero me recarga toda la página. Lo que deseo, es recargar sólo el DIV donde se anida la tabla (actualizar esta sección solamente, sin recargar todo), es decir invocar desde la ventana hija esta función, ubicada en la ventana padre.

Código Javascript:

//QUE SE PUEDA INVOCAR DESDE LA VENTANA HIJA...
$("#TablaUsuariosID").load(CargaTabla());
 

Alguien que me pueda orientar en esto, me paseé por Google toda la tarde buscando algunos casos, sin respuesta hasta ahora; también estuve leyendo y probando códigos sugerentes del mismo portal jQuery (como Bind), pero sin resultado alguno. Toda respuesta será bienvenida.

Saludos,

[maycolalvarez]

intenta con window.parent.cargaTabla();

si llamas a reload es lógico que se recargue la página

[rfadgrmm]

Gracias por tu respuesta maycolalvarez, lo puse de ese modo y no me funcionó, el Firebug en Mozilla me arrojaba error "function CargaTabla is not defined"; finalmente lo puse de esta forma, no se si sea correcta la sintaxis en jQuery, o si estaré redundando eventos, pero me funcionó por ahora...

Código Javascript:

//VENTANA PADRE...
$.fn.CargaTabla = function() {
    var params = { "comando" : "ver-listado" }
    $.ajax({
        data: params,
        dataType: 'json',
        url: "http://miweb.dev/op-usuarios/cmd/usuarios",
        type: "post",
        beforeSend: function() {
            $("#CargandoID").css("display", "inline");
        },
        success: function(respuesta) {
            var datos = {"datos" : respuesta };
            var compilado = _.template($("#MostrarListaID").html());
            $("#CargandoID").css("display", "none");
            $("#ListadoUsuariosID").html(compilado(datos));
            $("#TablaUsuariosID").tablesorter({ sortList: [[1,0]], headers: { 0: {sorter: false}}, widgets: ['zebra'] });
        }
    });
}
function UsuariosTabla() {
    $.fn.CargaTabla();
}
$("#TablaUsuariosID").load(UsuariosTabla());
 

Código Javascript:

//VENTANA HIJA...
parent.$("#TablaUsuariosID").load(parent.$.fn.CargaTabla());
 

Ahora, lo que me preocupa es que al llamar nuevamente esta función, me agrega más registros a los ya existentes. Si antes tenía 20, ahora son 41 registros (con el nuevo), vuelvo a registrar usuarios y ahora son 63 repetidos; todo eso pasa sólo en la vista HTML, en mi base de datos se inserta sólo un registro. No se si tenga algo que ver con Underscore, pero ¿Habrá alguna forma para que se recargue el DIV sin repetir todos los registros al actualizar el div?

Saludos,

[hackjose]

Podrias usar insertadjacenthtml para el div

https://developer.mozilla.org/en-US/...rtAdjacentHTML