Como pasar datos a una pagina contenida en un iframe

sheshito · #1 (**permalink**) 08/10/2012, 14:00

Saludos, tengo una pagina php en la que tengo un input text un boton y un iframe que contiene por ejemplo buscar.php, ahora lo que deseo es que cuando presiono el boton me mande el dato que tengo en el input text y ese dato lo reciba buscar.php y hace una consulta a la bd y se recargue el iframe mostrando lo que encontro en la bd..alguien sabe como hacer eso..gracias por su ayuda...

Reedyseth · #2 (**permalink**) 08/10/2012, 14:03

¿Qué es lo que has intentando hacer hasta ahora ?

anacona16 · #3 (**permalink**) 08/10/2012, 14:04

Esto lo harías mas facil con ajax...

sheshito · #4 (**permalink**) 08/10/2012, 14:20

Respondiendo a Reedyseth, lo que hice fue en el evento onclick del boton llamo a buscar.php y tambien le paso una variable, pero lo que consigo es que buscar.php se me habra en el navegador y pierdo mi pagina principal...

Y respecto a lo que dice anacona16, tiene algun ejemplo sobre ajax para lo que estoy buscando, gracias....

anacona16 · #5 (**permalink**) 08/10/2012, 14:31

TE voy a ilustrar algo muy rapido.

Código HTML:

Ver original<input type='text' id='busqueda' />
<input type='button' id='btn-busqueda' value='Buscar' />
 
<div id='resultados'></div>

Ahora el evento jQuery para enviar la petición, (esto va en el head entre etiquetas <script>)

Código Javascript:

Ver original$('#btn-busqueda').click(function(){
    $.ajax({
        type : 'post',
        data : 'busqueda=' + $('#busqueda').val(),
        url  : 'buscar.php',
        success : function(data)
        {
            $('#resultados').html(data)
        }
    });
});

Y tu buscar.php recibe la variable busqueda enviada por POST, hace la consulta en la BD imprime los resultados con un ciclo, y muestra los resultados.

Algo asi:

Código PHP:

Ver original<?php
 
$busqueda = $_POST['busqueda'];
 
$sql = 'SELECT * FROM tabla WHERE campo LIKE "%'.$busqueda.'%"';
 
$consulta = mysql_query($sql);
 
while($row = mysql_fetch_array($consulta)){
    echo $row['campo'];
}

Sin recargar la pagina la funcion ajax mostrara en el div resultados los resultados de tu consulta MySQL.

sheshito · #6 (**permalink**) 08/10/2012, 14:42

Algo que no entiendo es cuando dice "Sin recargar la pagina la funcion ajax mostrara en el div resultados los resultados de tu consulta MySQL. "

Entonces solo me faltaria recargar el iframe o a que se ferier..gracias...

anacona16 · #7 (**permalink**) 08/10/2012, 14:46

En el ejemplo que te mostre no uso ningún iframe, ahora te pregunto necesitas el iframe para algo especial o solo para mostrar los resultados?

En mi ejemplo cambio el iframe por el div resultados.

Y si, la función ajax envia lo que haya digitado el campo de texto cuando se de click en el boton, una vez se envie, la funcion ajax recibe un resultado de esa llamada por eso lo de success: function(data) en la variable data esta la informacion que se imprime el buscar.php esta informacion se toma y se pone en ese div.

Reedyseth · #8 (**permalink**) 08/10/2012, 14:52

La propuesta de anacando16 es lo primero que pense y es la mas acertada para cargar contenido por Ajax, pero que tal si en realidad lo quisieras en un iframe ?? digo no es para hechar tierra pero esta interesante para seguir con el tema y aprender :D

sheshito · #9 (**permalink**) 08/10/2012, 15:00

Si en realidad el iframe lo puse solo para mostrar el buscar.php..pero si lo reemplazo por el div q menciona anacona16 deberia funcionar igual, aunq lo implemente y me lanza una este error..

Error en query: , el error es: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

Creo q es algun campo de la base voy a revisar..

anacona16 · #10 (**permalink**) 08/10/2012, 15:03

Si, lo que te puse es un ejemplo ya tendras que adaptarla a tus necesidades.

Reedyseth · #11 (**permalink**) 08/10/2012, 15:08

De todos modos para agregar mas a tu post te voy a poner como hacerlo con el iframe si es así que es lo que deseas hacer o si tu cabeza esta dando vueltas con jQuery, pero si te recomiendo que aprendas jQuery que te va a quitar muchos problemas de encima.

Bueno pasando a tu pregunta, supongamos que tenemos un html donde esta el input donde se va a hacer el post que luce como el siguiente:

toIframe.html:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SITE</title>
        <style type="text/css" media="screen">
            html, body {
                background-color: #000;
            }
        </style>
    </head>
    <body>
        <h1>no text file</h1>
       <form action="buscar.php" method="post" target="buscar">
            <input type="text" name="contenido"/>
        <input type="submit" name="setvideo" Value="buscar"/>
       </form>
       <br>
        <iframe id="buscar" src="buscar.php"></iframe>
    </body>
</html>

y este es el código del iframe, buscar.php:

Código HTML:

Ver original<?php 
     if (isset($_POST['contenido'])){
        echo$_POST['contenido'];
    };
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SITE</title>
       <style type="text/css" media="screen">
            html, body {
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <h1>Este es mi iframe</h1>
       
    </body>
</html>

Con este código cuando te hagas el post se ira a tu iframe y se refrescará con la nueva información.

Puntos importantes a remarcar:

el post se hace a tu iframe en action="buscar.php"
para que tu información se vaya al iframe usamos el atributo target="buscar" donde buscar es el id de tu iframe.

espero que con eso sea respondida tu pregunta, ya que preguntaste como enviar la información a un iframe.

anacona16 · #12 (**permalink**) 08/10/2012, 15:12

Es una solución mas facil, y totalmente valida.

sheshito · #13 (**permalink**) 08/10/2012, 15:18

Gracias voy a revisar ya que en mi buscar.php tengo diseñado para que se cargue ahi toda la informacion...gracias creo q es justo lo que buscaba...

Reedyseth · #14 (**permalink**) 08/10/2012, 15:47

Cita:

Iniciado por sheshito

Gracias voy a revisar ya que en mi buscar.php tengo diseñado para que se cargue ahi toda la informacion...gracias creo q es justo lo que buscaba...

Pero no olvides checar jQuery, así como anaconda16 se fue por ese camino, yo también lo hubiera tomado.

anacona16 · #15 (**permalink**) 08/10/2012, 15:55

Cita:

Iniciado por Reedyseth

Pero no olvides checar jQuery, así como anaconda16 se fue por ese camino, yo también lo hubiera tomado.

Es anacona16

Reedyseth · #16 (**permalink**) 08/10/2012, 16:18

A si si, jejeje :p sin la 'd'

sheshito · #17 (**permalink**) 08/10/2012, 16:47

Estuve revisando el codigo que puso anacona16, y lo que veo es que el dato que ingreso en el input text no se esta pasando a buscar.php, ya estuve trando de modificar el code para lograr enviar la variable para hacer la busqueda pero la variable esta vacia...cual podra ser el problema...si en el form action de la pagina pricincipal le pongo action="buscar.php" pasa la variable pero este buscar.php se me habre en el navegador y eso no es lo que quiero...espero su ayuda...gracias...

anacona16 · #18 (**permalink**) 08/10/2012, 16:50

En el código que te puse el campo de texto y el boton no están dentro de un form.

sheshito · #19 (**permalink**) 08/10/2012, 17:16

Si ya lo puse dento del form pero nada q envia..la variable llega vacia..alguna idea..

anacona16 · #20 (**permalink**) 08/10/2012, 17:28

No lo tienes que poner dentro del form...

sheshito · #21 (**permalink**) 08/10/2012, 17:34

si no lo pongo en el form no hace nada...

anacona16 · #22 (**permalink**) 08/10/2012, 17:37

Si lo hace, tienes firebug, mira la peticion que se hace al presionar el boton, la idea de hacerlo con ajax es que no te recargue la pagina, muestra tu codigo para poder ayudarte mejor.

sheshito · #23 (**permalink**) 08/10/2012, 17:49

Bueno algo q no mencione es que tengo un joomla y dentro de el estoy metiendo paginas php, es decir en un articulo cargo una pagina php...quiza sera es el problema...??

sheshito · #24 (**permalink**) 08/10/2012, 17:54

este es el codigo en mi pagina donde tengo el iframe

Cita:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
$('#busca').click(function(){
$.ajax({
type : 'post',
data : 'busqueda=' + $('#busqueda').val(),
url : 'buscar.php',
success : function(data)
{
$('#resultados').html(data)
}
});
});
</script>
<body>
<form name="buscar" method="POST" action="">

<div id='resultados'></div>

<div class="divcentro">
Seleccione un campo para la búsqueda: <p>
<select name="categoria">
<option>Nombre</option>
<option>Apellido</option>
<option>Cédula</option>
</select>

<input type="text" value="" name="busqueda" id="busqueda" />
<input type="submit" id="busca" value="buscar" />
</div>

<div id="capadiv" style="display:block;">
<iframe src="buscar.php" id="ver" style="border-width: 0px;width: 680px; height: 500px;background: #4F6497;"AllowTransparency>
</iframe>
</div>

</form>
</body>

</html>
</head>

anacona16 · #25 (**permalink**) 08/10/2012, 17:55

Pues no deberia pasar, lo tiene online?

anacona16 · #26 (**permalink**) 08/10/2012, 17:56

Mirando tu codigo, primero que todo no tiene un div resultados y tambien el buscar.php tiene que estar en la misma ruta que tu archivo.

sheshito · #27 (**permalink**) 08/10/2012, 22:04

No lo tengo online....y si tengo puesto el div resultado, y algo x mencionar, q en el div resultado no m muestra nada pero el iframe q tengo se actualiza y ahi m carga datos pero los que corresponden a un criterio q le pongo si dicho campo esta vacio cargue esos datos y carga eso...entonces ahi lo raro cuando digo q la variable no se esta pasando por eso me coje vacio y carga segun el criterio en mi consulta..

sheshito · #28 (**permalink**) 09/10/2012, 10:39

Les comento amigos que ya solucione el problema, y si en realidad el codigo q me paso anacona16 si funciona, el problema era que en mi pagina buscar.php tenia otras funciones las cuales estaban dando conflictos y por eso me daba error, hice una limpieza de codigo y todo de maravilla...gracias a todos...