FancyBox IFRAME

nicostone · #1 (**permalink**) 14/06/2011, 15:54

Hola amigos tengo un gran problema con FancyBox, que paso a comentarles mediante fancybox abro un Iframe, ha ese iframe le mando datos mediante la URL es decir GET gracias al GET completo algunos campos del formulario que se encuentra en el iframe el usuario deberia completar el restos y enviar el formulario, aqui viene el problema que al apretar en el boton enviar deberia pasar lo siguiente que es CERRAR el IFRAME que abri mediante fancybox (Lo cual lo he realizo bien) y una vez que se cierra el iframe los datos del formulario deberian ser enviados a la pagina que abrio el iframe (la que se ve detras, los que usas fancybox entienden), procesar esos dato y mostrar el resultado, lo que no he podido lograr es que cuando se cierre el iframe me envie los datos a la pagina de donde se llamo el iframe

asi llamo el iframe

Código Javascript:

Ver original$(document).ready(function() {
$("#myIFrame").fancybox({
                'width'         : '75%',
                'height'            : '75%',
                'autoScale'     : false,
                'transitionIn'      : 'none',
                'transitionOut' : 'none',
                'type'          : 'iframe'
            });
 
});

espero que alguien me ayude. desde ya gracias.

NicoStone.

livemusic · #2 (**permalink**) 15/06/2011, 11:38

Espero y este te ayude, aunque no es lo ideal pero bien te puede servir..

Código Javascript:

Ver original$("#myIFrame").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
 'type': 'iframe', 
 'onClosed': function() { 
   parent.location.reload(true); 
  } 
});

nicostone · #3 (**permalink**) 17/06/2011, 17:01

Gracias amigo ya lo probe y no me funciona ya que si me refresca la pagina pero no me envia los datos que van por POST a la pagina original.

Muchas gracias.

Saludos.

NicoStone

Naahuel · #4 (**permalink**) 17/06/2011, 18:41

Esto funciona aunque me parece un tanto rebuscado.

index.php

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("#ejemplo").fancybox({
                'width'         : '20%',
                'height'            : '20%',
                'autoScale'     : false,
                'transitionIn'      : 'none',
                'transitionOut' : 'none',
                'type'          : 'iframe'
            });
        });
    </script>
</head>
<body>
<div id="content">
    <p><a id="ejemplo" href="form.php">Cargar datos</a></p>
    <p>Datos: <?php echo $_REQUEST['datos']?></p>
</div>
</body>
</html>

form.php

Código PHP:

Ver original<html>
<head>
<script>
function enviar_datos(form){
    var datos = form.datos.value;
    parent.document.location = 'index.php?datos=' + datos;
    parent.$.fancybox.close();
}
</script>
</head>
<body>
<form action="#" onsubmit="enviar_datos(this)">
<p><input type="text" name="datos" id="datos" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>

-edit-

Me olvidé de mencionar que para este ejemplo sería necesario asegurarse que los datos pasados estén con los caracteres escapados para que se envíen correctamente.

nicostone · #5 (**permalink**) 16/08/2011, 01:16

Muchas gracias por la respuesta... la verda que deje fancyBox por otro.... pero gracias por responder.