Ejecutar funcion al Cerrar un Popup

rogoelpra · #1 (**permalink**) 17/12/2007, 16:11

Buenas...

Alguien podria indicarme como puedo hacer para que cuando cierre un popup pueda tambien correr una funcion en la pagina que lo origino.

Yo tengo una pagina donde tengo un listado de clientes. En este ademas de los criterios de busqueda y el boton buscar, tengo el boton agregar, el cual abre un popup donde ingreso la informacion de un nuevo cliente. Una vez guardada dicha informacion en el popup aparece el boton cerrar el cual cierra el popup. Lo que yo deseo el que a la vez que lo cierro, tambien corra la funcion buscar que tengo en la pagina principal.

Espero que me hayan entendido, y espoero que puedan ayudarme.

GRACIAS

mauled · #2 (**permalink**) 17/12/2007, 16:25

Yo usuario la siguiente linea para solucionar eso

Código:

window.opener.parent.funciondemiventanapadre();

Saludillos.

rogoelpra · #3 (**permalink**) 17/12/2007, 16:55

Gracias mauled, pero no me funciona...

En el popup coloco la siguiente funcion:

Cita:

function pasadatos(nombre,nit)
{
dialogArguments.frm_client.nit.value = nit;
dialogArguments.frm_client.nombre.value = nombre;
window.opener.parent.recargar();
close();

}

y en la ventana padre tengo definida la funcion recargar definidad asi: (por ahora)

Cita:

function recargar()
{
alert("Recargo");
}

Donde podra estar el error...

Te agradezco mucho.

Saludos.

rogoelpra · #4 (**permalink**) 18/12/2007, 18:04

Que tal... de nuevo yo... Gracias por tu ayuda mauled... ya logro hacer lo que quiero siempre y cuando el popup lo abra con la funcion window.open .

El lio esta en que yo quiero y necesito abrirla es con la funcion showModalDialog ya que la ventana padre debe quedar bloqueada hasta que no se cierre la ventana hijo.

Usando la funcion como la muestro en le comentario anterior me sale que opener es null o no esta definido...

Espero puedan continuar ayudandome... Cualquier comentario al respecto sra bienvenido... Gracias de nuevo

CHAO

rogoelpra · #5 (**permalink**) 19/12/2007, 12:59

Tengo una Ventana uno en donde muestro un listado de clientes desde el cual al dar clic sobre un boton me abre una ventana dos en donde puedo agregar uno nuevo. Lo que deseo es que una vez agregue el nuevo cliente se me cierre la ventana dos y esta accion conlleve a recargar la ventana uno usando como criterios de busqueda el nombre y el nit del nuevo cliente, por tanto la funcion que cierra la ventana dos debe pasar estos 2 datos y ademas recargarme la ventana uno.

En resumen la funcion debe ejecutarse al cerrar la ventana dos y debe pasar los dos datos y recargarme la ventana uno pero la ventana dos debe bloquear la ventana uno hasta que la dos no se cierre.

A continuacion menciono las 2 formas:

1. De esta forma la funcion en cuestion se ejecuta tan pronto cierro la ventana dos, paso los dos datos y recarga la ventana uno pero esta no me bloquea la ventana uno.

Funcion que abre la ventana dos:

Cita:

function createwindow()
{
window.open("am_clientes_add.php","ventana","width =780,height=580,scrollbars=no,center=yes,help=no,s tatus=no,resizable=no");
}

Funcion que cierra la ventana dos:

Cita:

function pasadatos_dos()
{
var nit = document.frm_vent_newclient.val_nit.value;
var nombre = document.frm_vent_newclient.var_text_nomb.value;
window.opener.document.frm_client.nit.value = nit;
window.opener.document.frm_client.nombre.value = nombre;
opener.recargar(); // Funcion que permite recargar la Ventana uno.
close();
}

2. De esta forma la ventana dos bloquea la ventana uno y al cerrarse pasa los datos pero no me recarga la ventana uno.

Funcion que abre la ventana dos:

Cita:

function pagina_muestra(url,nombre)
{
win = window.showModalDialog(url,nombre,"dialogWidth:780 px; dialogHeight:580px; center:yes; help:no; status:no; resizable:no");
}

Funcion que cierra la Ventana dos:

Cita:

function pasadatos()
{
var nit = document.frm_vent_newclient.val_nit.value;
var nombre = document.frm_vent_newclient.var_text_nomb.value;
dialogArguments.frm_client.nit.value = nit;
dialogArguments.frm_client.nombre.value = nombre;
window.opener.recargar(); // Aqui esta el error.
close();
}

En la segunda forma me sale que window.opener es nulo o no es un objeto.

Cual deberia ser la forma de definirlo o como debo hacer para una vez se cierre la ventana dos decirle que ejecute la funcion recargar.

Espero haber sido claro, y espero que puedan ayudarme... DE ANTEMANO MUCHAS GRACIAS.

rogoelpra · #6 (**permalink**) 22/12/2007, 14:23

... Será acaso que es Imposible...

rogoelpra · #7 (**permalink**) 26/12/2007, 15:31

Alguien podria ayudarme...

rogoelpra · #8 (**permalink**) 27/12/2007, 10:23

Panino5001 · #9 (**permalink**) 27/12/2007, 21:14

showModalDialog sólo funciona en Explorer. Yo simularía el comportamiento, con la ayuda de un iframe, de la siguiente manera:
página principal:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>principal</title>
<script>
function $(id){
    return document.getElementById(id);    
}
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}

function set_opacity(div, val) {
  if (div.filters) {  //For IE
    val *= 100;
    try {
      div.filters.item("DXImageTransform.Microsoft.Alpha").opacity = val;
    } catch (e) { 
      // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
      div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
    }
  } else {
    div.style.opacity = val;
    div.style.MozOpacity = val;  //This is for older Mozilla Browsers
  }
} 

function getWindowData(){
var cw,widthViewport,ch,heightViewport,xScroll,yScroll,widthTotal,heightTotal;

if (typeof window.innerWidth != 'undefined')
  {
   
       widthViewport= window.innerWidth;
       heightViewport= window.innerHeight;
    
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0)
  {

        widthViewport=document.documentElement.clientWidth;
         heightViewport=document.documentElement.clientHeight;
   
  }
  else   {
    
       widthViewport= document.getElementsByTagName('body')[0].clientWidth;
         heightViewport=document.getElementsByTagName('body')[0].clientHeight;
   
  }
 
xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);

widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
return [cw,widthViewport,ch,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
popup=false;
function alargar(){
var pagina=getWindowData();
if(!$('overlay')){
ov=document.createElement('div');
ov.id='overlay';
ov.style.zIndex='90';
ov.style.backgroundColor='black';
try{set_opacity(ov, 0.5);}catch(e){}
document.getElementsByTagName('body')[0].appendChild(ov);
set_opacity($('overlay'), 0.5);
}
document.getElementById('overlay').style.position='absolute';
document.getElementById('overlay').style.height=pagina[7]+'px';
document.getElementById('overlay').style.width='100%';
document.getElementById('overlay').style.top=document.getElementById('overlay').style.left=0;

}
function recargar()
{
alert("Recargó");
}
function ventana(){
popup=true;
var pagina=getWindowData();
$('qq').style.top=((pagina[3]-400)/2)+pagina[5]+'px';
$('qq').style.left=(pagina[1]/2)-250+'px';
$('qq').style.zIndex='100';
alargar();
}
function cerrar(){
popup=false;
$('qq').style.top='-500px';
$('qq').style.left='-500px';
$('qq').style.zIndex='10';
document.getElementsByTagName('body')[0].removeChild($('overlay'));
}
window.onresize=function(){if(popup){ventana();}}
window.onload=function(){
addEvent($('pp'), 'click', ventana, false);
}
</script>
<style type="text/css">
<!--
#pp {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #999999;
    text-decoration:underline;
    cursor:pointer;
}
#qq {
position:absolute;
left:-500px;
top:-500px;
}
-->
</style>
</head>

<body>




<span id="pp">Abrir</span><br /><br />
<br />

<div id="qq"><iframe src="pop.php" scrolling="no" width="500" height="400" frameborder="0"></iframe></div>
</body>
</html>

Página secundaria (en el ejemplo: pop.php):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>popup</title>
<script>
function $(id){
    return document.getElementById(id);    
}
function addEvent(obj, evType, fn, useCapture){
 
 if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    
  } else if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn);
   
  } else {
   obj['on'+evType]=fn;
  }
}
function pasadatos()
{
$("nit").value =datos.Nit;
$("nombre").value =datos.Nombre;
window.parent.recargar();
window.parent.cerrar();

}
var datos={Nit:'algo',Nombre:'otracosa'};
window.onload=function(){
addEvent($('cerrar'), 'click', pasadatos, false);
}
</script>
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
}
-->
</style></head>

<body>
<form id="form1" name="form1" method="post" action="">
  <div align="center">
    <input name="nit" type="text" id="nit" />
    <input name="nombre" type="text" id="nombre" />
    <input id="cerrar" type="button" name="Submit" value="cerrar" />
  </div>
</form>
</body>
</html>

rogoelpra · #10 (**permalink**) 28/12/2007, 10:22

Gracias Panino5001, esta muy bacano el ejemplo...

Gracias por compartilo. Es lo que necesitaba

, voy a ponerlo en practica.

Mil Gracias.

Panino5001 · #11 (**permalink**) 28/12/2007, 10:39

Me alegra que te sirva. Le hice unas mejoras a la página principal (tema de alturas y scroll) y edité el código anterior por si otros lo necesitan.

rogoelpra · #12 (**permalink**) 02/01/2008, 16:30

Gracias de nuevo Panino5001...

Oye, podrias decirme como puedo lograr simplemente el efecto de la Opacidad sobre la Pagina para uan funcion que tengo que debe mostrar el formulario tal cual es pero sin permtir que usuario introduzca informacion... Me gustaria hacerlo con el efecto que tu haces cuando se abre el ifame...

Gracias de Nuevo.

Panino5001 · #13 (**permalink**) 03/01/2008, 07:14

La capa opaca, en el ejemplo, se crea con la función alargar (ojo, que necesita de las funciones getWindowData y set_opacyty)