Mootools Dentro de Funcion AJAX

massu_vago · #1 (**permalink**) 02/06/2010, 02:03

Saludos.

escrivo para solicitar su ayuda, mi problematica es la siguiente, estoy haciendo mi web con ajax y con la libreria mootools. en la pagina principal si hago click en un link y abre el efecto boombox de mootools, el problema es que cuando abro una pagina en un div mediante ajax y intento usar el efectoo boombox dentro de ese div no funciona, probe cargando las librerias dentro de esa pagina pero no consigo nada. aqui mi codigo

INDEX.PHP

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="text/javascript" src="/ajax.js" type="text/javascript"></script>
<script  type="text/javascript" src="../boombox/mootools.js"></script>
<script  type="text/javascript" src="../boombox/flowplayer.min.js"></script>
</head>

<body >
<!--aqui llamo una funcion simple que carga en targetDiv la pagina con boomBox -->
<a href="#nogo" onclick = "pedirDatos('contenido.php','targetDiv')"><b>Inicio</b></a>
<div id="targetDiv"></div>
<!-- en esta llamada a boombox no hay problema se muestra ok -->
<a href="test.pdf" class="bumpbox" rel="640-480" title="PDF Files">a</a>
<script  type="text/javascript" src="../boombox/bumpbox.js"></script>
</body>
</html>

CONTENIDO.PHP(Aqui El Problema)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="text/javascript" src="/ajax.js" type="text/javascript"></script>
<script  type="text/javascript" src="../boombox/mootools.js"></script>
<script  type="text/javascript" src="../boombox/flowplayer.min.js"></script>
</head>

<body>
<!-- cuando intento abrir este link con la pagina cargada en el div no muestra el efecto boombox y el contenido q se muestra en boombox sale en otra pagina -->
<a href="test.pdf" class="bumpbox" rel="640-480" title="PDF Files"><img src="images/pdf.png" width="118" height="90" alt="PDF File" />asdasdasdsad a</a>
<script  type="text/javascript" src="../boombox/bumpbox.js"></script>

</body>
</html>

Ayuda Porfavor, Gracias.

caricatos · #2 (**permalink**) 02/06/2010, 03:08

Tema movido desde Ajax

mayid · #3 (**permalink**) 02/06/2010, 11:01

"escrivo" va con b larga.

No me parece acertado cargar una pagina con ajax si esa pagina tiene definición DOCTYPE y cabecera. Las pagina que traes con ajax tienen que tener solo el contenido del body, pero excluir incluso la etiqueta <body>. Si no, como haces para insertar la información en el dOM?

Por otro lado, las librerias deberías cargarlas en la pagina principal, pero no repetirlas en la segunda pagina!:

Cita:

Si lo que queres hacer es que la segunda pagina tambien cargue ajax, habría que buscar algun evento similar al .live() de jquery. Pero en mootools. O adjudicar la funcionalidad en un callback. Pensa que cuando inicializas boombox todavía el nuevo enlace no existe. Así que cuando viene ya perdió el tren.

massu_vago · #4 (**permalink**) 02/06/2010, 13:50

Gracias por tu respuesta pero no me sirvio de mucho, ya habia intentado quitarle todas las etiquetas html y las referencias pero sigue sin poder visualizar el bumpbox en el 2 ajax corregi mi codigo quedo asi

INDEX.PHP

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script language="text/javascript" src="/ajax.js" type="text/javascript"></script>
<script  type="text/javascript" src="../boombox/mootools.js"></script>
<script  type="text/javascript" src="../boombox/flowplayer.min.js"></script>
</head>

<body >
<a href="#nogo" onclick = "pedirDatos('contenido.php','targetDiv')"><b>Inicio</b></a>
<div id="targetDiv"></div>


      	<a href="test.pdf" class="bumpbox" rel="640-480" title="PDF Files">a</a>

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

</body>
</html>

CONTENIDO.PHP

Código:

<a href="test.pdf" class="bumpbox" rel="640-480" title="PDF Files"><img src="images/pdf.png" width="118" height="90" alt="PDF File" />asdasdasdsad a</a>

mayid · #5 (**permalink**) 02/06/2010, 14:55

Cita:

Si lo que queres hacer es que la segunda pagina tambien cargue ajax, habría que buscar algun evento similar al .live() de jquery. Pero en mootools. O adjudicar la funcionalidad en un callback. Pensa que cuando inicializas boombox todavía el nuevo enlace no existe. Así que cuando viene ya perdió el tren.

Insisto. Tu segundo enlace no esta presente cuando se inicializa em bumpbox. Que supongo que se inicializa aqui, pero no puedo saber como porque no lo publicaste:

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