problemas con GREYBOX + PROTOTYPE + AJAX

JuanRAPerez · #1 (**permalink**) 12/01/2009, 09:37

Quisiera solicitar su ayuda con un problema que tengo con AJAX, PROTOTYPE, GREYBOX.

Problema:
Tengo un sitio, en el cual retraigo via AJAX una pagina, en la cual se tiene que “listar” títulos de galerías fotográficas.
Al entrar a esa página necesito que al dar clic en cada galería se cargue vía GREYBOX el contenido y detalle de dicha galería.
si coloco un alert y un timer si logra ejecutarse porque creo que lo evalúa “onfly”, pero no asi los .js que son los que utilizo para GREYBOX.
Incluso si coloco un alert dentro de un .js tampoco lo ejecuta, solo los que están en el código.
Espero haberme dado a entender.

He leído en el foro algunos temas que están relacionados con “evaluar scripts que vienen de AJAX”.
http://www.forosdelweb.com/f77/probl...totype-414142/
MaBoRaK
http://tutoriales.maborak.com/ajax/
Leí también el HOWTO de MaBoRaK
http://www.forosdelweb.com/f77/howto...e-ajax-510438/
Encontré este mismo error posteado en otro lado y no había respuesta
http://www.forosdelweb.com/f77/conte...1/#post2629123

Quisiera saber si alguien puede ayudarme con este problema.
[pego el código de las paginas que tengo y coloco enlace por si alguien quiere descargar los archivos]
http://168.243.178.215/ajax/ajax.rar

desde ya gracias por su ayuda

Prototype versión: version: 1.6.0

css/default.CSS

Código HTML:

@charset "utf-8";
/* CSS Document */
/*
height: 15px;  FI
#height: 20px; IE
_height: 25px; IE6
[url]http://blog.unijimpe.net/hack-css-para-ie6-ie7/[/url]
*/

body 
	{
	margin-top: 0px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	text-align: center;
	font-size: 12px;
	background-color: black ;
	}
A:link
	{
	color: yellow;
	text-decoration: none;
	}
A:visited
	{
	color: yellow;
	text-decoration: none;
	}
A:active 
	{
	color: silver;
	text-decoration: none;
	}
A:hover
	{
	background-color: ;
	color: aqua;
	text-decoration: underline;
	}
#DivInicial
	{
	left: 0px;
	top: 0px;
    position: absolute;
    background-color: aqua;
    width: 800px;
    height: 500px;
	}
#DivMenu
	{
	left: 0px;
	top: 0px;
    position: absolute;
    background-color: fuchsia ;
    width: 300px;
    height: 500px;
    float: left;
	}
#DivContenido
	{
    background-color: lime;
    width: 500px;
    height: 500px;
    float: right;
	}

default.html

Código lenguaje:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>default</title>
 
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
        var GB_ROOT_DIR = "greybox/";
    </script>
    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css">
 
    <script type="text/javascript">
    function nada()
            {   
            }   
        function CargarPaginaDestacado()
            {
                new Ajax.Updater( 'DivContenido', 'destacado.html', { method: 'get', evalScripts: true });
            }
    </script>
    <style type="text/css">
        @import url('css/default.css');
    </style>
</head>
<body>
<div id="DivInicial">
    <div id="DivMenu">
        <h1>menu</h1>
        <p><a href="#" onclick="CargarPaginaDestacado()">cargar página</a></p>
    </div>
    <div id="DivContenido">
        <h2>contenido</h2>
        <script type="text/javascript">
            CargarPaginaDestacado()
        </script>
    </div>
</div>
</body>
</html>

destacado.html

Código lenguaje:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>destacado</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
        var GB_ROOT_DIR = "greybox/";
    </script>
    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css">
</head>
 
<body>
    <h1>destacado</h1>
    <h2><a href="PopUp_Galeria.html" title="galeria" rel="gb_page_center[500, 500]">enlace para cargar la ventana emergente con greybox</a></h2>
    <p><strong>el enlace contiene el metodo de greybox lo siguiente</strong>: <br>&lt;a href=&quot;PopUp_Galeria.asp?id=2&quot; 
    title=&quot;galeria&quot; rel=&quot;gb_page_center[500, 500]&quot;&gt;enlace para cargar la ventana 
    emergente con greybox&lt;/a&gt;</p>
    <h2><a href="http://www.google.com" onclick="window.open('http://www.google.com','new','toolbar=no,directories=no,status=no,titlebar=no,menubar=no,scrollbars=no,resizable=no,width=300,height=450,top=0,left=0'); return false">enlace 2</a></h2>
    <p><strong>el enlace 2 contiene</strong>:<br>&lt;a href=&quot;[url]http://www.google.com&quot;[/url] onclick=&quot;window.open('http://www.google.com','new','toolbar=no,directories=no,status=no,titlebar=no,menubar=no,scrollbars=no,resizable=no,width=300,<br>height=450,top=0,left=0'); return false&quot;&gt;enlace 2&lt;/a&gt;</p>
    <p>cargado el : <%=now()%></p>  
 
    <script type="text/javascript">
        setTimeout("alert('2 segundos!')",2000)
    </script>
    <p>fin escritura</p>
</body>
</html>

popup_galeria.html

Código lenguaje:

Ver original<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="es">
<title>popup</title>
    <style type="text/css">
        @import url('css/PopUp.css');
    </style>
</head>
 
<body>
    <div id="DivVerGaleria">
        <h1>venta emergente</h1>
        <p class="fecha">07.01.2009</p>
        <p class="informacion">&nbsp;informacion adicional</p>
    </div>
</body>
</html>

GatorV · #2 (**permalink**) 12/01/2009, 10:12

Hola JuanRAPerez,

Viendo el Source de Greybox, lo que hace es adjuntar un "onload" al evento window, llama a la funcion decoGreyboxLinks() que cicla por todo el DOM los elementos <a> y busca el atributo rel="".

Lo que tendrias que hacer es copiar todos los .js, en el directorio padre (el que no es cargado por AJAX), y al evaluar los scripts, volver a llamar a decoGreyboxLinks(), para que salgan los enlaces que cargues por AJAX.

Saludos

JuanRAPerez · #3 (**permalink**) 12/01/2009, 10:23

oki gracias maestro probare y comento luego

JuanRAPerez · #4 (**permalink**) 12/01/2009, 10:45

Cita:

Iniciado por GatorV

Hola JuanRAPerez,

Viendo el Source de Greybox, lo que hace es adjuntar un "onload" al evento window, llama a la funcion decoGreyboxLinks() que cicla por todo el DOM los elementos <a> y busca el atributo rel="".

Lo que tendrias que hacer es copiar todos los .js, en el directorio padre (el que no es cargado por AJAX), y al evaluar los scripts, volver a llamar a decoGreyboxLinks(), para que salgan los enlaces que cargues por AJAX.

Saludos

GatorV:

quiero agradecerte el tiempo y sobre todo la ayuda, la cual ha sido muy buena.

Ya esta resuelto el problema, para la gente que entre a este post, les dejo como queda la pagina que se llama con el AJAX

Gracias Totales: GatorV!

destacado.html

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>destacado</title>

</head>

<body>

    <h1>destacado</h1>

    <h2><a href="PopUp_Galeria.html" title="galeria" rel="gb_page_center[500, 500]">enlace para cargar la ventana emergente con greybox</a></h2>

    <p><strong>el enlace contiene el metodo de greybox lo siguiente</strong>: <br>&lt;a href=&quot;PopUp_Galeria.asp?id=2&quot; 

    title=&quot;galeria&quot; rel=&quot;gb_page_center[500, 500]&quot;&gt;enlace para cargar la ventana 

    emergente con greybox&lt;/a&gt;</p>

    <h2><a href="http://www.google.com" onclick="window.open('http://www.google.com','new','toolbar=no,directories=no,status=no,titlebar=no,menubar=no,scrollbars=no,resizable=no,width=300,height=450,top=0,left=0'); return false">enlace 2</a></h2>

    <p><strong>el enlace 2 contiene</strong>:<br>&lt;a href=&quot;http://www.google.com&quot; onclick=&quot;window.open('http://www.google.com','new','toolbar=no,directories=no,status=no,titlebar=no,menubar=no,scrollbars=no,resizable=no,width=300,<br>height=450,top=0,left=0'); return false&quot;&gt;enlace 2&lt;/a&gt;</p>

    <p>cargado el : <%=now()%></p>    

    <script type="text/javascript">

        setTimeout("alert('2 segundos!')",2000);

        decoGreyboxLinks();

    </script>

    <p>fin escritura</p>

</body>

</html>

:)

Aguiw · #5 (**permalink**) 21/01/2010, 16:20

Cita:

Iniciado por JuanRAPerez

GatorV:

quiero agradecerte el tiempo y sobre todo la ayuda, la cual ha sido muy buena.

Ya esta resuelto el problema, para la gente que entre a este post, les dejo como queda la pagina que se llama con el AJAX

Gracias Totales: GatorV!

destacado.html

Código PHP:

  <html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>destacado</title>

</head>

<body>

    <h1>destacado</h1>

    <h2><a href="PopUp_Galeria.html" title="galeria" rel="gb_page_center[500, 500]">enlace para cargar la ventana emergente con greybox</a></h2>

    <p><strong>el enlace contiene el metodo de greybox lo siguiente</strong>: <br>&lt;a href=&quot;PopUp_Galeria.asp?id=2&quot; 

    title=&quot;galeria&quot; rel=&quot;gb_page_center[500, 500]&quot;&gt;enlace para cargar la ventana 

    emergente con greybox&lt;/a&gt;</p>

    <h2><a href="http://www.google.com" onclick="window.open('http://www.google.com','new','toolbar=no,directories=no,status=no,titlebar=no,menubar=no,scrollbars=no,resizable=no,width=300,height=450,top=0,left=0'); return false">enlace 2</a></h2>

    <p><strong>el enlace 2 contiene</strong>:<br>&lt;a href=&quot;http://www.google.com&quot; onclick=&quot;window.open('http://www.google.com','new','toolbar=no,directories=no,status=no,titlebar=no,menubar=no,scrollbars=no,resizable=no,width=300,<br>height=450,top=0,left=0'); return false&quot;&gt;enlace 2&lt;/a&gt;</p>

    <p>cargado el : <%=now()%></p>    

    <script type="text/javascript">

        setTimeout("alert('2 segundos!')",2000);

        decoGreyboxLinks();

    </script>

    <p>fin escritura</p>

</body>

</html>

:)

Hola,

Tengo el mismo problema, ,pero soy nuevo en esto y no acabo de entender la solución. Para ser más concreto uso GREYBOX y TABLESORTER y he observado que al añadir la siguiente línea:

<script type="text/javascript" src="js/AJS.js">

el TABLESORTER deja de funcionar.

Como puedo solucionarlo? Gracias.

fabian_anz · #6 (**permalink**) 11/04/2010, 20:20

Hola a todos, alguien me ayuda con un problemilla ke tengo, si alguien entra a mi pagina web, http://www.terapiasfisicas.es/terapias en la seccion tipos de masajes, y utiliza internet explorer se va a dar cta que se me sale de la configuracion al ejecutar greybox, entonces cdo quiero cerrar la sub-ventana si se le puede llamar asi, la cruz (X) para cerrar y volver a la pagina principal no se ve se sale de la resolucion. me explico? bien ya se daran cuenta que soy amateur en esto, pero en fin todos empezamos de cero alguna vez. desde ya muchas gracias