JQuery Datepicker Iframe problema

Kronox · #1 (**permalink**) 30/04/2011, 20:00

Estoy usando el codigo de datepicker de JQuery y esto es lo que tengo:

Código:

        <script>
		  $(document).ready(function(){
      		$("#datepicker").datepicker({ 
	  	    gotoCurrent: false,
            onSelect: function(date, inst) { window.location = "eventpick.php?date="+date; },
            defaultDate: "<?php if(isset($_GET['date'])) { echo $_GET['date']; } else { echo 'null'; } ?>",
		  	showOn: "button",
			buttonImage: "img/calendar.gif",
			buttonImageOnly: true
      		});
  		});
		</script>

Lo que quiero hacer es que el window location se abra en un iframe abajo en mi pagina, algún experto en javascript sabe como lograr esto? Gracias.

fodsite · #2 (**permalink**) 30/04/2011, 21:03

Qué tal Kronox, la solución que te muestro aquí no es con un iframe, sólo es con un div en donde se cargará el archivo evento.php a través de una llamada ajax con .get().

Archivo principal:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ejemplo Datepicker</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/css/ui-lightness/jquery-ui-1.8.12.custom.css" />
    <script type="text/javascript" src="jquery-ui/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.12.custom.min.js"></script>
    <script type="text/javascript" src="jquery-ui/development-bundle/ui/i18n/jquery.ui.datepicker-es.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#loading").ajaxStart(function(){ $(this).show(); });
            $("#loading").ajaxStop(function(){ $(this).hide(); });
            
            $("#datepicker").datepicker({
                gotoCurrent: false,
                onSelect: function(date, inst) {
                    $.get('evento.php?date='+date, function(data) {
                        $('#resultadoEvento').html(data);
                    });
                },
                defaultDate: "<?php if(isset($_GET['date'])) { echo $_GET['date']; } else { echo 'null'; } ?>",
                showOn: "button",
                buttonImage: "calendar.gif",
                buttonImageOnly: true
                });
            });
    </script>
</head>
<body>
 
<input id="datepicker" type="text" />
 
<hr />
 
Resultado evento:
<div id="loading" style="display:none;"><img src="loading.gif" /></div>
<div id="resultadoEvento"></div>
 
<hr />
 
</body>
</html>

Archivo: evento.php

Código PHP:

Ver original<?php
 
echo "<h1>Fecha: ".$_GET['date']."</h1>";
 
?>

Saludos.

caricatos · #3 (**permalink**) 30/04/2011, 23:15

Tema movido desde javascript

Kronox · #4 (**permalink**) 01/05/2011, 17:28

Forzosamente tengo que hacerlo en un iframe debido a que estoy usando un codigo de paginacion y este no funciona si uso un div.

fodsite · #5 (**permalink**) 02/05/2011, 06:08

Muy bien kronox, aquí tengo la solución para iframe:

Código Javascript:

Ver original<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Ejemplo Datepicker</title>
        <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/development-bundle/themes/jquery.ui.datepicker.css" />
        <script type="text/javascript" src="jquery-ui/js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.10.custom.min.js"></script>
        <script type="text/javascript" src="jquery-ui/development-bundle/ui/i18n/jquery.ui.datepicker-es.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#datepicker").datepicker({
                    gotoCurrent: false,
                    onSelect: function(date, inst) {
                        var v = 'evento.php?date='+date;
                        mostrarResultado(v);
                    },
                    defaultDate: "<?php if(isset($_GET['date'])) { echo $_GET['date']; } else { echo 'null'; } ?>",
                    showOn: "button",
                    buttonImage: "calendar.gif",
                    buttonImageOnly: true
                    });
            });
            function mostrarResultado(val){
                document.getElementById("iframeDatos").src=val;
            }
        </script>
    </head>
    <body>
     
    <input id="datepicker" type="text" />
     
    <hr />
     
    <h4>Resultado evento:</h4>
    <iframe  id="iframeDatos" name="iframeDatos"  frameborder="0"  vspace="0"  hspace="0"  marginwidth="0"  marginheight="0" width="500" scrolling="yes"  height="100"></iframe>
     
    <hr />
     
    </body>
    </html>

Puedes poner el iframe invisible si lo deseas para que no te ocupe el espacio por defecto, pero es cosa de gustos.

Saludos.

Kronox · #6 (**permalink**) 02/05/2011, 10:50

Muchísimas gracias fodsite, debería existir mas gente como tu en el mundo.

Ya logre que saliera el iframe, solo que tengo un problema. Estoy utilizando unas ajax tabs sacadas de dynamic drive: [URL="http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/"]Ajax Tabs[/URL]
Ahora, el problema es que estas ajax tabs al hacerles click me abren un iframe, y si yo tengo otro iframe este se va a abrir arriba o abajo del otro iframe, entonces lo que necesito es hacer que el contenido salga en ese mismo iframe.

La solución que se me ocurrió es usando la misma forma en que funcionan las ajax tabs, como le hago para que en cambio de salir la imagen del botón por ejemplo, me tire este código:

<li><a href="evento.php?date=+date" rel="#iframe">Eventos</a></li> y que al hacerle click me salga el datepicker y que redireccione la pagina al iframe establecido.

Ahora, no se si esto sea posible, quizas exista alguna otra manera, como reemplazando el otro iframe cuando use el datepicker.., ojala se te ocurra una solucion. Gracias de nuevo y Saludos.

fodsite · #7 (**permalink**) 02/05/2011, 11:15

Perdón pero no entendí bien tu inquietud.

¿Lo tabs se abriran dentro del primer iframe que llamas con datepicker? o son totalmente apartes.

¿Se relacionan los tabs con lo enviado al primer iframe de datepicker?

Espero te expliques mejor.
Saludos.

Kronox · #8 (**permalink**) 02/05/2011, 11:31

No, el nuevo iframe que es el que funciona con el datepicker no esta ligado a los demas, y es por esto que se abre otro iframe que es el que usan los tabs.

Lo que quiero es que el datepicker este ligado al iframe que se abre con los tabs, pero sinceramente tengo problemas entendiendo el codigo de los tabs. Para abrir el iframe de los tabs tienes que utilizar rel=#iframe en un link, pero no se como abría de usarse este para que funcione con el datepicker.

fodsite · #9 (**permalink**) 02/05/2011, 12:14

Ok, prueba dándole a cada iframe un nombre con el atributo name y luego para llamarlo desde los tabs o con datepicker ve alguna forma de indicar con el atributo target el nombre de cual quieres llamar.