Cerrar popup y refrescar ventana principal

[loki_gz]

Buenas foreros,

Primero de nada deciros que en JavaScript ando algo pez por lo que os pido comprensión .

Os expongo el tema:
Tengo una página principal en la que, al pulsar sobre un link, me abre un popup. Desde ese popup, si pulso en otro link, cierra ese popup y abre uno nuevo. Lo que quiero es que al cerrar ese segundo popup me refresque la ventana principal y para eso no encuentro solución.

He buscado y probado códigos que he encontrado en este y en otros foros, pero no funcionan correctamente o no hacen exactamente lo que yo busco.

El código que utilizo en ambos popup y el que funciona mejor que ningún otro (aunque no como yo quiero) es el siguiente:

Código JAVASCRIPT:

<script language='JavaScript'>
function close(url)
    {
        document.form.submit();
        window.opener.document.location=url;
        self.close();
    }
</script>
 

Donde a la variable url le paso la dirección de la página principal.

Con este código consigo que en el primer popup sí envíe el formulario, se cierre el popup y recargue la página principal. Como a este primer popup le he añadido otra línea de código, al pulsar sobre el link además de hacer lo que os he descrito, abre un nuevo popup.
El problema está cuando pulso en el link cerrar de este segundo popup, que ejecutaría el código que tenéis arriba. Lo que hace es enviar el formulario y cerrar el popup, pero no recarga la página principal, tengo que hacerlo yo manualmente.

¿Qué código tengo que usar para que me funcione bien?

Muchas gracias

[nilburcion]

Si quieres recargar la página prueba a usar:

Código:

window.opener.document.location.reload();

De hecho se trata de un tema muy parecido aqui:

http://www.webdeveloper.com/forum/showthread.php?t=145429

Espero que te sirva.

[loki_gz]

Gracias por contestar nilburcion.

Ya conocía ese código, de hecho lo he probado ya, pero no funciona bien. El resultado es similar al que se produce con el código que colgué en el primer post. Es decir, sí envía el formulario pero no cierra la ventana (hay que hacerlo manualmente) ni refresca la ventana principal.

No sé que código javascript es necesario, pero creo que el problema está en que como el segundo pop-up se crea desde otro pop-up que se ha cerrado, este segundo, cuando manda recargar la ventana precedente se bloquea porque esta ventana ya no existe (es el primer pop-up que ya se ha cerrado). Sin embargo, lo que yo necesito es recargar la página original y no sé como hacerlo desde ese pop-up.

Espero que se me entienda

[emprear]

No vas a poder con 2 popup, al cerrase el primero, ya no queda nada que vincule a la página principal con el 2º popup. Tendrías que ver la forma de hacer el proceso solo con 1 solo. En realidad no veo para que 2 si uno se cierra al abrir el otro

Pienso lo siguiente
pagina principal abrepop1.html contiene

Código HTML:

<p onclick="window.open('pop1.html','ventanauno','width=200,height=200,scrollbars=no');">pop1</p>
 

ese pop1.html tiene un link que carga en esa misma ventana

Código HTML:

<a href="pop2.html">pop2</a>
 

y el pop2.html (que sigue estando en "ventanauno" que a su vez sigue teniendo por parent a la ventana principal tiene esto

Código Javascript:

<script type="text/javascript">
//<![CDATA[
parent.opener.location = 'abrepop1.html?recargar;
t = setTimeout("self.close()",8000);
//]]>
</script>
 

lo del cierre automático puede obviarse, no se si esa ventana presenta solo un mensaje o el usuario tiene que hacer algo en ella.
Le agregue un prámetro par que verifiques.
Lo probé y funciona bien en FF e IE

SAludos

[loki_gz]

Tal como me has indicado, he replanteado el problema para poder eliminar uno de los pop-up y así utilizar una sóla ventana.

La cosa ahora queda así:
Tengo una ventana principal en la cual, al hacer clic en un enlace envío un formulario (llamémosle FORM1) y abro una ventana de un tamaño determinado y centrada en la pantalla mediante javascript. El código es el siguiente:

Código JAVASCRIPT:

function popup(url,largo,alto)
    {
        document.form.submit();
        var posicion_x; 
        var posicion_y; 
        posicion_x=(screen.width/2)-(largo/2); 
        posicion_y=(screen.height/2)-(alto/2);
        newwindow=window.open(url,'name','width='+largo+',height='+alto+',left='+posicion_x+',top='+posicion_y+'');
        if (window.focus) {newwindow.focus()}
    }
 

Y las variables se las paso a través de aquí:

Código HTML:

<input type="button" value="Enviar" onclick="popup('form2.php?c=1',300,300);" /> 

En este popup tengo un formulario (llamémosle FORM2) que debo cubrir y al darle al botón de enviar quiero que me envíe el FORM2, también que dentro de esa misma ventana del popup me abra otra página con otro formulario (FORM3) y además que redimensione la ventana para adaptarla al nuevo formulario. Para ello empleo este código:

Código JAVASCRIPT:

function link(url,largo,alto)
    {
        document.form2.submit();
        document.resizeTo(largo,alto);
        document.location=url;
    }
 

Las variables se las paso por aquí:

Código HTML:

<input type="button" value="Enviar" onclick="link('form3.php?id=2',700,300);" /> 

Y AQUÍ ESTÁ EL PROBLEMA AHORA.
El problema está en que no me inserta en la BD los datos del formulario enviados por el primer popup. Sí inserta en la BD los enviados desde la página principal pero no los del popup (y antes de la reestructuración sí que lo hacía). Por más vueltas que le doy no veo donde puede estar el fallo. A ver si entre todos me ayudáis a encontrar el error.

Ya para finalizar, en FORM3 quiero que al darle al botón enviar me envíe el formulario, me cierre el popup y me recargue la página principal. Para ello debería servir este código:

Código JAVASCRIPT:

function cerrar(url)
    {
        document.form3.submit();
        window.opener.document.location=url;
        self.close();
    }
 

Espero haber sido suficientemente claro con las explicaciones

[emprear]

Es que tu primer popup esta mal, no estas enviando nada, te dejo la forma correcta de hacer que el action de un form pase sus resultados a una nueva ventana

Código HTML:

<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
 
var nvcarga= null;
function popupForm(nombre,w,h){
var winleft = (screen.width-w)/2;
var wintop = (screen.height-h)/2;
caracteristicas='height='+h+',width='+w+',top='+wintop+',left='+winleft+',titlebar=no,scrollbars=yes,location=0,toolbar=0,resizable=yes'
nvcarga=window.open("",nombre,caracteristicas);
if(parseInt(navigator.appVersion) >= 4){nvcarga.window.focus();}
return true;
}
 
//]]>
</script>
</head>
<body>
<form name="form1" action="form2.html" method="get" onsubmit="return popupForm(this.target,100,300)" target="ventana1">
<input type="text" name="nombre" />
<input type="submit" value="Enviar" />
</form>
</body>
</html>
 

Soluciona eso primero

Saludos

[loki_gz]

Gracias emprear por estar pendiente de este tema.

Verás, no sé porque dices que está mal, ya que a mi me funciona (al menos en firefox). Estoy seguro de que el código que me has propuesto está mucho más depurado que el mío, pero te puedo garantizar que ahí no está el problema.

El problema lo encuentro con el formulario que he llamado FORM2 (para entendernos).

Ahora, creo haber averiguado donde está el fallo con lo que he estado leyendo hoy por ahí.

Parece ser que no pueden ir juntos en la misma función un submit y un document.location ya que ambos hacen un reenvío a otro sitio y javascript no lo acepta. Al parecer, según el navegador que se use, este conflicto se resuelve de una manera diferente.

El caso es que existe un conflicto y aún no sé como solucionarlo. ¿Ideas?

[emprear]

Si dices que el nombre de tu primer form es form1, y en la script usas
document.form.submit();
form es algo indefinido y no deberia procesarla ni ejecutar la script

Saludos

[loki_gz]

Bueno, tienes razón en eso, emprear, pero eso es un error que he cometido a la hora de simplificar el código que he colgado para explicar mi problema. Te puedo asegurar que esa parte del código funciona perfectamente.

Como ya te comenté, el problema, por lo que pude averiguar se encuentra en el conflicto entre los dos parámetros que le paso al javascript del FORM2.

De nuevo, gracias por tu tiempo

[emprear]

ok, si es asi, funciona, hacía la aclaración porque quizás en tu script si decia form1

pero ahora vayamos al problema, y permitime repasar todo desde cero agregando algun dato como ejemplo, ya que si no, no entiendo

hay una página principal con un form1 y que ese form se procesa con action=form2.php, apareciendo los resultados en un primer popup, supongamos que en ese primer form tenes un input name=nombre, y todo se esta haciendo por get.

Aparece entonces estes primer popup (que contiene a form2.php) y muestra un segundo formulario de name "form2"
Pregunto? que hace el form2.php con $_GET['nombre'] ?, despues el ciclo mas o menos se repite con los forms y popups posteriores. Como al parecer el insert en la BD, requiere de valores de los forms 1 y 2 y se hacen el tercer paso, lo que deberías hacer es almacenar $nombre en un campo hidden en el form2, par poder pasarlo al tercero, eso es lo único que se me ocurre

SAludos

[zerokilled]

buenas,

Iniciado por emprear

No vas a poder con 2 popup, al cerrase el primero, ya no queda nada que vincule a la página principal con el 2º popup.

puede que ya no venga al caso. aunque bien no he leido todo tema, queria comentar algo al respecto. se puede vincular una ventana descendiente de la principal sin importar el nivel profundo de la "generación". el único requisito es que el ancestro [la ventana principal] tenga declarado un nombre. luego, desde uno de los descendiente recreas el objeto Window con self.open indicando en el segundo parámetro el nombre de uno de sus ancestro o incluso hermanos. lo mismo se puede hacer al reverso, el "abuelo" (ventana principal) puede recrear el objeto Window de uno de sus "nietos" (ventanas descendientes o secundarias) indicando el nombre en self.open aunque algunos de los intermediarios hayan "muerto" (cerraron la ventana).

el siguiente ejemplo es un script que crea tres descendientes, cada uno a partir de la ventana creada. para crear la ventana haces click en cualquier parte. para vincular la ventana con el acestro presiona el botón. las ventanas Father y Son puedes cerrarla, Child seguira teniendo comunicación con Grand. funciona en chrome y firefox, en iexplorer no he comprobado.

nota: debes nombrar el documento como "ancestor.html"

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Relinking the lost family</title></head>

<body>
<h1>Relinking family</h1>
<p>Click anywhere to open next child. <input type="button" value="Relink with Grand" id="relink"> </p>
<script type="text/javascript">
var relation = ["Grand", "Father", "Son", "Child"], next = Number(location.search[1]) || 0;
if(!location.search) self.name = relation[next];
document.title = relation[next++] +" - "+ document.title;

self.onclick = function(){
if(relation[next]) self.open("ancestor.html?"+next, relation[next]);
self.onclick = null;
};

document.getElementById("relink").onclick = function(){
var grand = self.open(null, "Grand"), p = grand.document.createElement("p");
grand.document.body.appendChild(p);
p.innerHTML = self.name +" relinked with "+ grand.name;
	this.onclick = function(){
	var p = grand.document.createElement("p");
	grand.document.body.appendChild(p);
	p.innerHTML = self.name +" is already linked with "+ grand.name;
	};
};
</script>
</body></html> 

[emprear]

@zerokilled
Viendo y ejecutando el ejemplo, parece muy claro, pero no encuentro la forma de definirle un window.name a la ventana principal, y que el segundo popup lo reconozca.

Saludos

[zerokilled]

que tal, @emprear!

no estoy seguro si he entendido tu duda. te respondo a lo que he entendido. fíjate bien en el código, específicamente la segunda línea de javascript.
if(!location.search) self.name = relation[next];. en este caso se le asigna el primer elemento del array relation, Grand.

justamente lo que hace es asignarle un nombre a la ventana padre. pues al cargar el documento, éste no tiene parámetros por url, de modo que la condición es cierta y le asigna un name a la ventana principal. luego, en la ventana secundaria y subsiguientes, siempre se enlaza al padre/abuelo de forma fija...
var grand = self.open(null, "Grand"). fíjate que el segundo parámetro siempre será Grand. en todo caso, la ventana principal primero debe tener un nombre definido antes de un descendiente poder enlazar.

si aún tienes problema, tendrás que hablarme en código.

[emprear]

Bueno, trato de resumir (aunque prefier que sobren datos a que falten)
la idea original del usuario era

una ventana principal abierta en el navegador a la que llamaremos
abrepop1.html, y aqui simplifico, apuntando a lo que especificamente es el tema de las ventanas, (había otras cuestiones de por medio con el paso de variables entre formularios), digamos entonces que abrirpop1.html contiene un evento onclick que realiza

Código HTML:

<p onclick="window.open('pop1.html','ventanauno','width=200,height=200,scrollbars=no');">pop1</p>
 

tenemos entonces a pop1.html cargado en esa ventana nueva de nombre "ventanauno", el contenido de este debe tener un link que:
abra un pop2.html en una nueva ventana y a su vez cierre la ventana de nombre "ventanauno", lo cual se hace con

Código HTML:

<!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>
<title>pop1</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
    Este es el pop 1
<a href="#" onclick="abrirpop2();return false;">ir a pop2</a>
<script type="text/javascript">
//<![CDATA[
 
function abrirpop2(){
window.open('pop2.html','ventanados','width=200,height=200,scrollbars=no');
self.close();
}
 
//]]>
</script>
</body>
</html>
 

Ahora este 2 popup cargado en ventanados, debe, tras cierta acción, cerrarse y recargar la página principal, abrirpop1.html (a la cual le paso un parámetro solo al efecto de comprobar que se está recargando).

Es aquí, en este segundo popup, con el primero ya cerrado, donde no encuentro como vincular el target para abrirpop1.html, en la ventana principal del navegador.

Como hacer eso desde el primer pop (ventanauno), se puede hacer con

Código Javascript:

self.opener.location = 'abrepop1.html?salir=gracias'
 

mi propuesta fue, dado que en definitiva al abrir el pop2, se cerraba el uno, y no tenía mucho objeto, no abrir una "ventanados", sino directamente con un link sencillo, cargar el pop2.html en la misma ventana (es decir "ventanauno", que aún está emparentada con la página principal) y que este pop dos hiciera el
self.opener.location = 'abrepop1.html?salir=gracias'
Con eso el problema se resuelve
Pero ahora... ahora me encuentro con tu script.

Detengo mi explicación aquí, porque mientras elaboraba la respuesta estuve jugando con un par de cosas (inspirado por tu indicación de asignarle un name a la ventana principal), y como resultante de eso, encontré una solución mucho mas simple, la cual comparto muy sintéticamente

abrirpop1.html

Código HTML:

<script type="text/javascript">
//<![CDATA[
self.name = "ventanaprincipal";
//]]>
</script>
</head>
<body>
<a href="#" onclick="window.open('pop1.html','ventanauno','width=200,height=200,scrollbars=no'); return false;">pop1</a>
</body>
 

pop1.html

Código HTML:

<script type="text/javascript">
//<![CDATA[
function abrirpop2(){
window.open('pop2.html','ventanados','width=200,height=200,scrollbars=no');
self.close();
}
//]]>
</script>
</head>
<body>
Este es el pop 1
<a href="#" onclick="abrirpop2();return false;">ir a pop2</a>
</body>
 

pop2.html

Código HTML:

<script type="text/javascript">
//<![CDATA[
function recargarprincipal(){
window.open('abrepop1.html?salir=gracias','ventanaprincipal');
self.close();
}
//]]>
</script>
</head>
<body>
Este es el pop 2
<a href="#" onclick="recargarprincipal();return false;">Procesar</a>
</body>
 

el self.name="ventanaprincipal" en abrirpop1.html fue la clave de todo

Gracias por la orientación
Saludos

[zerokilled]

eventualmente, a eso me referia con la explicación que antes mencione. para mis gustos, en la vinculación del segundo popup con la principal, yo no le pasaría un string como primer argumento. no estoy muy seguro si eso pudiera causar una recarga a la ventana aún siendo la misma url. por eso en la demostración anterior le pasaba null como url. no he comprobado en todos los navegadores que efecto tiene, pero era como una medida preventiva.

por otro lado, el propósito de mi respuesta anterior era solo demostrar que se puede vincular una ventana con otra aunque se pierda la relación directa de padre/hijo. por supuesto, es válido siempre y cuando las ventanas sean creada bajo una relación familiar. porque tampoco es que una ventana pueda enlazarse con cualquier otro que no sea de su generación.

en fin, en lo personal optaría por la misma propuesta que expones. trabajar todo desde un solo popup y cuando llegue al final, cerrar y recargar el principal. en realidad, es menos complicado.