Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Estas en el tema de Como puedo cerrar una ventana FancyBox al pulsar un boton submit en el foro de Frameworks JS en Foros del Web. En una ventana de FancyBox presento un formulario. de esta manera @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original $ ( document ) . ready ( ...
  #1 (permalink)  
Antiguo 18/07/2010, 08:01
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Como puedo cerrar una ventana FancyBox al pulsar un boton submit

En una ventana de FancyBox presento un formulario.
de esta manera
Código Javascript:
Ver original
  1. $(document).ready(function() { 
  2. $('a.ventana').click(function(){
  3. $.fancybox({
  4. 'width'     : '42%',               
  5. 'height'        : '68%',               
  6. 'autoScale' : false,               
  7. 'transitionIn'  : 'none',              
  8. 'transitionOut' : 'none',  
  9. 'href'      : $(this).attr('href'),
  10. 'type'      : 'iframe'
  11. });
  12. return false;
  13. });
  14. });

y lo abro asi:

Código HTML:
Ver original
  1. <li><a class="ventana" href="elegir.php"><b>Elegir</b></a></li>

En el formulario tengo un boton submit.
Como puedo cerrar la ventana del Fancybox al pulsar el boton submit.
El codigo del boton es:
Código HTML:
Ver original
  1. <input id="elegir" type="submit" name="ELEGIR" value='ELEGIR>
  #2 (permalink)  
Antiguo 18/07/2010, 08:58
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Fijate en la API: http://fancybox.net/api

En donde dice public methods tenes esto: $.fancybox.close
  #3 (permalink)  
Antiguo 18/07/2010, 12:25
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Gracias, pero
No se como poner en el codigo del boton submit para que se cierre la ventana.
Y no he visto ningun ejemplo en un boton submit.
No se como incluir en el input del boton el codigo $.fancybox.close().
Si lo pongo asi no me funciona.
<input id="elegir" type="submit" name="ELEGIR" value="ELEGIR" onClick="$.fancybox.close();">
¿Como lo tengo que poner?

Última edición por corretodo; 18/07/2010 a las 14:05
  #4 (permalink)  
Antiguo 18/07/2010, 17:19
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

No se si el evento click se aplica a un input. Podes sin embargo aplicarlo a algun otro elemento.

Fijate en la FAQ (numero 5): http://fancybox.net/faq
  #5 (permalink)  
Antiguo 19/07/2010, 00:40
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Esto me funciona
Código HTML:
Ver original
  1. <input id="elegir" type="submit" name="ELEGIR" value="ELEGIR" onClick="parent.jQuery.fancybox.close();" >
Pero me cierra la ventana sin enviar el formulario.
Como puedo llamar esta funcion deltro de este codigo.
Código PHP:
Ver original
  1. if (isset($_POST['ELEGIR']))
  2. {
  3. Como lo puedo poner aqui para que cierre la ventana
  4. }
  #6 (permalink)  
Antiguo 19/07/2010, 08:05
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Ah! Ya veo. Tu ventana era un iframe: 'type' : 'iframe' y la API decía que funcionaría anteponiendo "parent" al codigo: parent.jQuery.fancybox.close(); Que bueno que te haya funcionado.

Respecto a la última pregunta, me parece que estás confundiendo codigo de lado servidor con codigo de lado cliente :o/

Lo que te puedo decir que el evento onClick se ejecuta "antes" que el evento submit. Es decir que si facybox se cierre y dispara "return false" entonces no va a pasar nada mas. Lo que podes probar es poner el evento "onSubmit", lo que en jQuery es sencillamente .submit:

http://api.jquery.com/submit/

Proba esto en el header, dentro de document.ready:

Cita:
$('#elegir').submit(function() {
parent.jQuery.fancybox.close();
return false;
});
Alternativamente esto puede funcionar también:
Cita:
$('#elegir').click(function() {
parent.jQuery.fancybox.close();
$('#nombreFormulario').submit();
});
PAra esto ultimo solo tendrías que poner el id del formulario donde dice nombreFormulario
  #7 (permalink)  
Antiguo 19/07/2010, 16:09
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Muchas gracias por el codigo que me has puesto
Lo he puesto como me has dicho, en el header con sus correspondientes etiquetas de apertura y cierre de javascript.
asi:
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $('#ELEGIR').submit(function() {
  3. parent.jQuery.fancybox.close();
  4. });
  5. });
o de esta otra manera
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $('#ELEGIR').click(function() {
  3. parent.jQuery.fancybox.close();
  4. $('#form_envio').submit();
  5. });
  6. });
Y no se cierra al pusar el boton submit "ELEGIR"
La pagina donde esta el formulario se llama envio.php.
El id="form_envio"
El boton el name="elegir" el value="ELEGIR"
El action del formulario modificar.php y esta pagina se ejecuta tambien en la ventana, y no en otra pagina diferente.
Deberia cerrarse la ventana y abrirse la pagina modificar.php en una pantalla fuera de la ventana, fancybox.
Asi que no se si esto se podra hacer.
  #8 (permalink)  
Antiguo 19/07/2010, 17:10
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

EL <input> del que estamos hablando está dentro de un iframe, no es verdad? Entonces no vamos a poderle asignar la funcionalidad así de facil como queríamos. El codigo que te pasé va a querer encontrar #elegir dentro de la pagina, y no lo va a encontrar porque está dentro de un iframe (de una pagina aparte).

Si pudieras, pone el evento click dentro del iframe. Sino, tendríamos que hacer algo así:

Cita:
$('#iframeID').contents().find('input#elegir’'.cli ck.submit(function() {
parent.jQuery.fancybox.close();
});
No se cual es el ID de tu iframe. Lo tiene? Si no, usemos: $('iframe')... o reveamoslo en caso de que exista más de uno.

Tema aparte: ojo, me parece que $('#elegir') va en minusculas para corresponderse con el id "elegir". Es decir, me parece que los selectores son case sensitive.
  #9 (permalink)  
Antiguo 19/07/2010, 22:16
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

No uso iframes.
Mira estoy en la pagina modificar a pantalla completa.
Entonces el un menu horizontal tengo la opcion en un <li> de Elegir.
El codigo del <li> es
<li><a class="ventana" href="elegir.php"><b>Elegir</b></a></li>
Al clicar en Elegir se abre la ventana del fancybox porque la class="ventana" esta definida para que habra la pagina elegir.php en una ventana de fancybox.
Esta pagina elegir.php contiene los encabezados con las funciones jabascript del fancybox.

Asi que a la vista tengo a toda pantalla la pagina modificar.php en el fondo y en la ventana fancybox tengo la de elegir.php.

En la pagina de elegir.php contiene un formulario con 3 etiquetas input 2 son tipo text y una un boton submit, que su value ="ELEGIR" y su name="elegir".
Tambien hay una tabla con dos <td> horizontales en la cual el usuario puede elegir unas opciones de la tabla.
Que clicando en una fila de la tabla las paso mediante codigo javascript a dos etiqutas input .
Y luego clicando en el boton submit "ELEGIR" las envia mediante metodo POST a la pagina modificar.php que es la que tengo a toda pagina en la parte de atras de la ventana fancybox.

Esto funciona perfectamente al clicar en el boton "ELEGIR" .
Pero dentro de la ventana del fancibox.

Se quita la pagina elegir.php y se pone la pagina modificar.php con los datos que he enviado por metodo POST.

Claro todo dentro de la ventana fancybox.

La peticion que he formulado es que al clicar en el boton ELEGIR se cierre la ventana fancybox que contiene la pagina elegir.php y me vuelva a cargar la pagina modificar.php a pantalla completa con los datos que he enviado por POST.

Última edición por corretodo; 19/07/2010 a las 22:22
  #10 (permalink)  
Antiguo 20/07/2010, 08:33
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Cita:
No uso iframes.
Hey! Pero si esto lo tenes en tu configuración. Fijate

Cita:
'type' : 'iframe'
Entonces fancybox abre el contenido en una ventana iframe:

Cita:
esta definida para que habra la pagina elegir.php en una ventana de fancybox.
Tu Fancybox está configurado para abrir contenidos a manera de iframes. Es decir, los contenidos no se insertan en el DOM y no los podes acceder con jquery a menos que uses lo que te pasé anteriormente (o elimines el type: "iframe" y lo cambies por modo ajax)
  #11 (permalink)  
Antiguo 20/07/2010, 11:41
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Fijate que ignorancia la mia.
Abrir una vertana fancybox no creia que seria un iframe.
En esto
Código Javascript:
Ver original
  1. $('#iframeID').contents().find('input#elegir’'.cli ck.submit(function() {
  2. parent.jQuery.fancybox.close();
  3. });
#iframeID a que te refieres ese nombre donde tengo que ponerlo.
Porque la ventana la abro con esto
Código HTML:
Ver original
  1. <li><a class="ventana" href="elegir.php"><b>Elegir</b></a></li>
Y el codigo javascript para abrir la ventana es este:
Código Javascript:
Ver original
  1. $(document).ready(function() { 
  2. $('a.ventana').click(function(){
  3. $.fancybox({
  4. 'width'         : '42%',               
  5. 'height'        : '72%',               
  6. 'autoScale'     : false,               
  7. 'transitionIn'  : 'none',              
  8. 'transitionOut' : 'none',                          
  9. 'href'          : $(this).attr('href'),
  10. 'type'          : 'iframe'
  11. });
  12. return false;
  13. });
  14. });
Si dejo todo asi de esta manera.
------------------------------------------------------------------------
Código Javascript:
Ver original
  1. $(document).ready(function() { 
  2. $('a.ventana').click(function(){
  3. $.fancybox({
  4. 'width'         : '42%',               
  5. 'height'        : '72%',               
  6. 'autoScale'     : false,               
  7. 'transitionIn'  : 'none',              
  8. 'transitionOut' : 'none',                          
  9. 'href'          : $(this).attr('href'),
  10. 'type'          : 'iframe'
  11. });
  12. return false;
  13. });
  14. });
  15. /* -------------------------------- */
  16. /* -------------------------------- */
  17. $(document).ready(function() {
  18. $('#iframe').contents().find('input#ELEGIR’'.cli ck.submit(function() {
  19. parent.jQuery.fancybox.close();
  20. });
  21. });
Código HTML:
Ver original
  1. Esto en la pagina modifica.rphp
  2. <li><a class="ventana" href="elegir.php"><b>Elegir</b></a></li>
  3. Esto en la pagina elegir.php
  4. <input id="elegir" type="submit" name="ELEGIR" value="ELEGIR" >
Al clicar en el menu del <li> Elegir
Se abre la pagina elegir.php pero no en la ventana si no a pantalla completa.
Quedan bloqueados los datos que hay en la tabla.
No me da opcion a clicar en la fila de la tabla.
Para poder elegir la fila que quiero enviar.
En el imput tipo text me presenta el primer registro de la tabla.
y al clicar en boton submit ELEGIR que tengo en esa pagina elegir.php
Me abre la pagina modificar.php con los dados del primer registro de la tabla que hay en la pagina elegir.php.
Ya nos vamos acercando.
Esto es lo que queria.
Pero ahora no me abre la pagina elegir.php en la ventana y tampoco puedo elegir los datos de la tabla.

Última edición por corretodo; 20/07/2010 a las 12:16
  #12 (permalink)  
Antiguo 20/07/2010, 14:06
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Bueno, la mejor manera de averiguarlo es usar un debugger. Por ejemplo Firefox. SI te fijas, te muestra el DOM con todos los tags html que nos agrega el fancybox para poder funcionar.

Me fijé, y creo que se llama así: fancybox-frame

Entonces queda esto:

Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#elegir’'.click.subm it(function() {
parent.jQuery.fancybox.close();
});
Ojalá funcione bien, si no lo vemos de nuevo.

Ah! Lo que yo no se es a que pagina apunta el formulario. No será a la pagina principal, no? Si el objetivo es procesar los datos de formulario pero no mostrarlos en pantalla, vamos bien :)
  #13 (permalink)  
Antiguo 21/07/2010, 00:45
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Con el FireFox ya lo veo.
Código Javascript:
Ver original
  1. <iframe id="fancybox-frame" name="fancybox-frame1279694022299" hspace="0" src="elegir.php" frameborder="0" scrolling="auto"></iframe>
Le faltaba un parentesis creo en tu cita anterior.
Creo que es asi como debe de quedar.
Código Javascript:
Ver original
  1. $(document).ready(function() { $('iframe#fancybox-frame').contents().find('input#ELEGIR').click.subm it(function() {
  2. parent.jQuery.fancybox.close();
  3. });
  4. });
De todas formas sigue igual.
No se abre la ventana del fancibox al clicar en Elegir.
El action del formulario va dirigido a la pagina modificar.php
Quitando la ultima funcion que me has enviado del header
Si aparece la ventana y puedo elegir la opcion que quiero de la tabla.
En el momento que la pagina elegir esta en la ventana, con el Firefox voy al web developer y en menu Varios miro el codigo html y no aparece nada del codigo de la pagina elegir.php que contiene el formulario y la tabla.
Solo esta el codigo html de la pagina que hago llamar a la elegir.php o sea la pagina que se encuentra en el fondo en opaco.
No aparece por ningun lado el boton ELEGIR del formulario.

Última edición por corretodo; 21/07/2010 a las 10:14
  #14 (permalink)  
Antiguo 21/07/2010, 19:03
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Cita:
No se abre la ventana del fancibox al clicar en Elegir.
Estoy medio perdido, y te dejo gran parte de la logica a vos. Sabelo.

Yo creía que el problema estaba al cerrar la ventana. Que no había ningun problema al abrirlo, y me concentré en cerrarlo "desde adentro" (desde un clickeable que existe dentro de un iframe, y que conduce a una pagina php que procesa el formulario a escondidas).

Mh... Ah! Ya entiendo. El codigo te está causando conflicto. Ok, a eso lo podes verificar con el firebug (en la consola te marca errores que tenga javascript y entonces es facil corregirlos una vez detectados)-

La otra manera de depurar es ir cortando el codigo de a trozos. Por ejemplo, si esto te da problemas:
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR').click.subm it(function() {
parent.jQuery.fancybox.close();
});
});
Probas con esto:
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR').click.subm it(function() {
});
});
Y si aún sigue mal, entonces con esto (hasta dar con el error)
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR')
});
Haciendolo encontré el error, fijate:

.click.submit

Esos dos metodos no pueden coexistir así. Eliminá uno. Si borras el submit, entonces acordate de incluir esto dentro del evento click:

Cita:
$('#form_envio').submit();
  #15 (permalink)  
Antiguo 22/07/2010, 02:19
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Con esto
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR').click.subm it(function() {
parent.jQuery.fancybox.close();
});
});
AL clicar en el Menu Elegir, aparece la ventana y se queda bloqueada la tabla.
No puedo elegir datos de la tabla
y al pulsar el boton ELEGIR.
Aparece deltro de la ventana la pagina modificar.php con los datos del primer registro.
No cierra la ventana.
----------------------------------------------
Con esto
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR').click.subm it(function() {
});
});
Ocurre lo mismo
--------------------------------------------------
Con esto
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR')
});
Si me deja elegir datos de la tabla y al clicar en elegir se abre dentro de la ventana la pagina modificar con los datos que he elegido.
No se cierra la vantana.
-----------------------------------------
Y con esto
Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR')
parent.jQuery.fancybox.close();
});
Al clicar en el menu Elegir (No en el boton ELEGIR)
Se abre y se cierra la ventana sin enviar ningun dato del formulario.
Claro, no envia nada porque no puedo clicar el boton ELEGIR
Asi que creo que el error esta aqui:
Cita:
click.subm it(function() { });
-----------------------------------------
Esto ultimo que me pones no lo entiendo
Recuerda que no se nada de javascript
Cita:
$('#form_envio').submit();
Como quedaria entonces?
  #16 (permalink)  
Antiguo 22/07/2010, 08:25
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Claro, el error está aqui: .click.subm it

Cuando usas .click() o .submit() tenes que definir una funcion anonima para manejar el evento. Por ejemplo:

Cita:
.submit(function() {});
No está mal encadenar eventos siempre y cuando el codigo sea leible, y las funciones estén bien declaradas:

Cita:
.click(function() {}).subm it(function() {});
Pero no necesitamos dos funciones en este caso. Solamente una. Por eso te propuse usar el evento .submit()

Te paso una tabla de referencias de eventos javascript. Son los mismos que en jquery solo que aquí le qutamos el prefijo "on":
http://www.elcodigo.com/tutoriales/j...vascript5.html

Entonces, definiendo un evento submit quedaría así:

Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR').submit(fun ction() {

parent.jQuery.fancybox.close();

});
});
Alternativamente, definiendo un evento click, quedaría así:

Cita:
$(document).ready(function() {
$('iframe#fancybox-frame').contents().find('input#ELEGIR').click.(fun ction(event) {
event.preventDefault();
parent.jQuery.fancybox.close();
$('#form_envio').submit();
});
});
Como ves, el codigo es más complicado y tiene que ver con manejo de eventos que no vale la pena explicar ahora. Probá con el primer codigo que te pasé.
  #17 (permalink)  
Antiguo 22/07/2010, 08:32
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Mira he descubierto lo siguiente:
Como no me funciona y me recomendaste una pagina con un ejemplo
he puesto esto
Cita:
$(document).ready(function() {
$('#elegir').click(function() {
/* Aqui debe ir algo para que envie el formulario */
parent.jQuery.fancybox.close();
return false;
});
});
Cita:
<form id="form_envio" method="post" action="modificar.php">
<input id="elegir" class="f_b_c" type="submit" name="ELEGIR" value="ELEGIR">
Lo de class="f_b_c" es para posicionar el boton con el css.
Lo he cambiado por si habia algun problema con el css.
Con esto ultimo que te pongo al clicar en el Menu Elegir, se abre la ventana, presenta la tabla y el formulario, con su correspondiente boton ELEGIR.
Puedo elegir el dato de la tabla que quiero.
Y al clicar en el boton ELEGIR.
Se cierra la ventana, pero no envia los datos del formulario que el action del formulario apunta a la pagina modificar.php
Asi que ya es esto lo unico que me queda.
Poner algo antes del paren.jQuery.fancybox.Close();
Al menos ya ejecuta la funcion sin bloquear nada y cierra la ventana
Ecepto que no envia el formulario.
  #18 (permalink)  
Antiguo 22/07/2010, 09:20
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Me alegro de que hayas encontrado una solución.

Lo que te falta es la linea de .submit()

Cita:
...
parent.jQuery.fancybox.close();
$('#form_envio').submit();
return false;
...
Con eso forzas al formulario a que envíe su contenido.

Con return false, cortás el comportamiento básico de un link o de un boton submit. Creo que en este caso se puede evitar esa linea, por cierto. Y eso era lo que te estaba trabado el envío recién.

Otra cosa: al fin estas usando minúsculas! No es lo mismo escribir #elegir que escribir #ELEGIR porque te estás refiriendo a elementos diferentes. Tené en cuante que después de una almohadilla tiene que ir el id de algun elemento html. En abstracto es así: #id
  #19 (permalink)  
Antiguo 22/07/2010, 09:47
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Es que creia que el #ELEGIR era el name del boton.
Y por eso ponia todo en mayuscula
Pero me he dado cuenta que es el id del boton.
Como el id del boton lo utilizaba para definir la posicion con el css.
Creia que la fancybox utilizaba el name del boton.
Esto es el no saber.
Bueno poniendo esta ultima senencia que me has dado.
Se cierra la ventana pero no envia el formulario.
Yo ya no quiero abusar mas de ti, asi que lo dejo por imposible.
Muchisimas gracias por tu ayuda, pero creo ya despues de todo lo que me has ayudado, no debe de haber solucion.
Ha costado mucho el llegar a dar con la opcion de que al clicar el boton se cierre la ventana.
Pero creo que esto tiene prioridad a todo y ya no deja hacer nada.
  #20 (permalink)  
Antiguo 22/07/2010, 12:05
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Claro que tiene solución. A mi me cuesta comprender del todo el problema, quizas porque al igual que vos, no asimilo todo lo que dice el otro :o)

La mejor manera de solucionar el problema es entender como funciona cada cosa que estamos usando. Si no, es probar a ciegas y pueden pasar días así.

Mi duda es sobre el lugar en donde estás poniendo el codigo jquery. Es en la pagina "padre" o en la pagina que está dentro del iframe? Eso es clave.

Si es desde la pagina padre, tenes que acceder al formulario con .contents() y usar .find('input#elegir')

Si es desde dentro, usas el selector que vos describiste: $('#elegir') o $('input#elegir')

Te dejo un par de papers para comprender más de selectores en jQuery:
http://www.maestrosdelweb.com/editor...do-con-jquery/
http://www.nosolocodigo.com/tutorial...los-selectores

Tener conceptos claros de javascript ayudaría. Igual, a esos papers usalos para "repasar" y no tanto para aprender teoría de "selectores avanzados" y cosas así.

Esta noche me voy de viaje. Si esto quedara solucionado me alegraría :o)
  #21 (permalink)  
Antiguo 22/07/2010, 12:42
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Gracias por los enlaces intentare solucionarlo.
Mas que nada es porque me veo sin ayuda impotente a hacer una cosa tan dificil.

Para decirte que el la pagina principal que se llama modificar.php tengo este codigo en el header para abrir el iframe.
Código Javascript:
Ver original
  1. $(document).ready(function() { 
  2. $('a.ventana').click(function(){
  3. $.fancybox({
  4. 'width'         : '42%',               
  5. 'height'        : '72%',               
  6. 'autoScale'     : false,               
  7. 'transitionIn'  : 'none',              
  8. 'transitionOut' : 'none',                          
  9. 'href'          : $(this).attr('href'),
  10. 'type'          : 'iframe'
  11. });
  12. return false;
  13. });
  14. });

Y en el menu de esa pagina la llamada al iframe.
Código HTML:
Ver original
  1. <li><a class="ventana" href="elegir.php"><b>Elegir</b></a></li>

La pagina del iframe se llama elegir.php
En el header de esta pagina esto:
Código Javascript:
Ver original
  1. $(document).ready(function() {
  2. $('#elegir').click(function() {
  3. $('#form_envio').submit();
  4. parent.jQuery.fancybox.close();
  5. return false;
  6. });
  7. });

y esto en el body de la pagina que esta en el iframe
Código HTML:
Ver original
  1. <form id="form_envio" method="post" action="modificar.php">
  2. <input id="oculto" type="text" name="id_amigo" value="<?php echo $id_amigo;?>">
  3. <div id="f_l_amigos"><b>AMIGO:</b></div>
  4. <input id="f_i_amigos" type="text" name="amigo" value="<?php echo $amigo;?>">
  5. <input id="elegir" class="f_b_amigos" type="submit" name="ELEGIR" value="ELEGIR">
  6. </form>

Son dos pagina una la principal modificar.php
y la del iframe elegir.php
  #22 (permalink)  
Antiguo 22/07/2010, 14:27
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Gracias por publicar esto. Me queda mucho más claro.

Lo que hay que modificar es la segunda pagina, en la sección de jquery no hace falta poner return false.

Ademas, no escribas jQuery sino $:
Cita:
parent.jQuery.fancybox.close();
parent.$.fancybox.close();
Pd: Estás usando la consola de firebug para detectar posibles errores de codigo?
  #23 (permalink)  
Antiguo 22/07/2010, 14:32
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 1 mes
Puntos: 101
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Segunda propuesta: usar ajax en vez de iframes (solo si lo anterior fallase).

Cita:
$(document).ready(function() {
$('a.ventana').click(function(){
$.fancybox({
'width' : '42%',
'height' : '72%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'href' : $(this).attr('href'),
'type' : 'ajax'
});
return false;
});
});
Y ahora sí, usar return false por razones que en un futuro te explicaría.

Cita:
$(document).ready(function() {
$('#elegir').click(function() {
$('#form_envio').submit();
parent.jQuery.fancybox.close();
return false;
});
});
  #24 (permalink)  
Antiguo 24/07/2010, 01:58
 
Fecha de Ingreso: agosto-2009
Mensajes: 193
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Bueno despues de pruebas y pruebas tanto utilizando las funciones bien desde dentro del iframe como desde fuera.
Segun me has explicado en hilos anteriores.
He llegado a la conclusion de que hay que utilizar las funciones desde dentro del iframe. Como bien me has comentado

Desde fuera la funcion no encuentra la ruta del boton, que esta el la pagina del iframe.
Al menos con los poquitos concimiento que tengo que mas bien son nulos.

Asi que me he centrado a hacerlo desde dentro del iframe.
Que si que escuentra la ruta del boton para crear los eventos.

Me he puesto a encadenar dichos eventos y los ponga donde los ponga siempre toma prioridad esto: parent.jQuery.fancybox.close(); y cierra la ventana sin enviar el formulario.
Tambien he buscado en el Google.

Despues de todo lo que llevamos hecho ya se ha conseguido localizar la ruta del boton y cerrar la ventana por software.

Asi que ya lo que me queda es que envie el formulario a otra pagina.
Seguire estudiandolo porque creo que ya es cosa de poco.
Muchas gracias por todo lo que me has ayudado.
Sin tu ayuda no hubiera llegado hasta aqui.

Saludos

Última edición por corretodo; 26/07/2010 a las 00:15
  #25 (permalink)  
Antiguo 19/10/2014, 23:45
 
Fecha de Ingreso: junio-2014
Mensajes: 4
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Yo lo logre de la siguiente forma con
Código Javascript:
Ver original
  1. parent.jQuery.fancybox.close();

puse el script al finalizar mi acción del submit en un echo, asi:

Código PHP:
Ver original
  1. echo '<script language="javascript" type="text/javascript">
  2.              parent.jQuery.fancybox.close();
  3.              </script>';

Me envió el formulario y después se cerro. Ahora solo me falta que refresque la pagina sin tener que oprimir F5.

bueno al menos a mi me funciono, espero te sirva:

Aqui pongo el codigo de la funcion del submit:

Código PHP:
Ver original
  1. if(isset($_POST['submit'])){
  2.    
  3.     $email = $_POST['email'];
  4.     $pass = $_POST['pass'];
  5.    
  6.     $sql = @mysql_query('SELECT * FROM admin WHERE email = "'.$email.'" AND pass = "'.$pass.'"');
  7.     $prove = @mysql_num_rows($sql);
  8.    
  9.     if($prove > 0){
  10.        
  11.         $admindata = @mysql_fetch_array($sql);
  12.        
  13.         $_SESSION['ip'] = getRealIP();
  14.         $_SESSION['user'] = $admindata['user'];
  15.         $_SESSION['email'] = $admindata['email'];
  16.        
  17.         echo '<script language="javascript" type="text/javascript">
  18.              parent.jQuery.fancybox.close();
  19.              </script>';
  20.        
  21.     }else{
  22.         echo '*error';
  23.     }
  24.    
  25. }
  #26 (permalink)  
Antiguo 20/10/2015, 20:46
 
Fecha de Ingreso: enero-2002
Mensajes: 1.174
Antigüedad: 22 años, 3 meses
Puntos: 21
Respuesta: Como puedo cerrar una ventana FancyBox al pulsar un boton submit

Gracias Esar,
tu comentario me ayudó a resolver mi necesidad


Cita:
Iniciado por Esar Ver Mensaje
Yo lo logre de la siguiente forma con
Código Javascript:
Ver original
  1. parent.jQuery.fancybox.close();

puse el script al finalizar mi acción del submit en un echo, asi:

Código PHP:
Ver original
  1. echo '<script language="javascript" type="text/javascript">
  2.              parent.jQuery.fancybox.close();
  3.              </script>';

Me envió el formulario y después se cerro. Ahora solo me falta que refresque la pagina sin tener que oprimir F5.

bueno al menos a mi me funciono, espero te sirva:

Aqui pongo el codigo de la funcion del submit:

Código PHP:
Ver original
  1. if(isset($_POST['submit'])){
  2.    
  3.     $email = $_POST['email'];
  4.     $pass = $_POST['pass'];
  5.    
  6.     $sql = @mysql_query('SELECT * FROM admin WHERE email = "'.$email.'" AND pass = "'.$pass.'"');
  7.     $prove = @mysql_num_rows($sql);
  8.    
  9.     if($prove > 0){
  10.        
  11.         $admindata = @mysql_fetch_array($sql);
  12.        
  13.         $_SESSION['ip'] = getRealIP();
  14.         $_SESSION['user'] = $admindata['user'];
  15.         $_SESSION['email'] = $admindata['email'];
  16.        
  17.         echo '<script language="javascript" type="text/javascript">
  18.              parent.jQuery.fancybox.close();
  19.              </script>';
  20.        
  21.     }else{
  22.         echo '*error';
  23.     }
  24.    
  25. }

Etiquetas: cerrar, fancybox, pulsar, submit, botones, ventanas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:02.