[BS: Aunque haya mucho código está resaltado en negrita y rojo la parte importante!]
Hola,
Voy a documentar un poco más lo que tengo porqué no hay manera de qué me salga:(
Tengo un código (slideshow) que si lo cargo directamente en la página(es decir, sin consultas AJAX), funciona. Está guardado en slide.js y usa además un pequeño script al final de la página (luego pongo el código). Tengo un subcontainer que recibe el texto o el slideshow por AJAX etc, y quiero que mi javascript se ejecute sobre él.
Lo que me devuelve el AJAX es esto:
Código:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<ul id="slideshow">
<li>
<h3>TinySlideshow v1</h3>
<span>photos/orange-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/orange-fish-thumb.jpg" alt="Orange Fish" /></a>
</li>
<li>
<h3>Sea Turtle</h3>
<span>photos/sea-turtle.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/sea-turtle-thumb.jpg" alt="Sea Turtle" />
</li>
...
...
...
<li>
<h3>Small Fish</h3>
<span>photos/small-fish.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/small-fish-thumb.jpg" alt="Small Fish" /></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
</body>
Como veis, no es una llamada a onload ni nada de esto sinó que la función JS que hace que funcione el slideshow es lo que os he puesto en negrita (además de otro fichero que es cargado en el header). Ahora, el tema está en qué si esto viene retornada por AJAX, en un div llamado subcontainer, no me funciona: no se si es por esto del final, o por el fichero javascript del header (slide.js).
Lo que he hecho a partir de la solución propuesta en el foro:
Copiar el interpretadorAjax.js y incluirlo en el header de mi index.php. Poner también el código del slide.js allí (que os como debe ir si lo meteríamos en un index.php sin tanto lío):
Código:
<head>
<title>Tecno-tor S.L.</title>
<link rel="stylesheet" href="./layout.css" media ="screen" type="text/css" id="estilo" />
<link rel="stylesheet" href="./slide.css" media ="screen" type="text/css" id="estilo" />
<script type="text/javascript" src="./funcions.js"></script>
<script type="text/javascript" src="./slide.js"></script>
<script type="text/javascript" src="./interpretadorAjax.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
Ahora, digamos que funcionaría si el JS se ejecutara. Pero no lo hace, así que modifico mi función AJAX así:
Código:
var ajaxdestination="";
function getdata(what, where, page) { // get data from source (what)
try {
xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { alert("Error loading data. Try another browser, please. Thank you for your patience.");}
checks(page);
document.getElementById(where).innerHTML ="<center id=ajax>Cargando...<br><img src='ajax-loader.gif'></center>"; // Gif while loading data
ajaxdestination=where;
xmlhttp.onreadystatechange = lanzamos_funcion; // when request finished, call the function to put result to destination DIV
xmlhttp.open("GET", what);
xmlhttp.send(null);
return false;
}
function lanzamos_funcion() { // put data returned by requested URL to selected DIV
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
var scs=myAjax.responseText.extractScript(); //capturamos los scripts
ajaxdestination.innerHTML=myAjax.responseText.stripScript();
scs.evalScript(); //ahora si, comenzamos a interpretar todo
document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
}
En negrita resalto lo añadido. Pero no me funciona. He probado de ponerlo antes y después de la línea xmlhttp.onreadystatechange = lanzamos_funcion;, así como donde está en el código que os he copiado. No hay manera de qué me funcione. He modificado el myDivUoTroLugar por ajaxdestination que es el div a donde se devuelve lo de AJAX. El error que me da el mozilla es: myAjax is not defined. Qué debo poner en lugar de myAjax? O qué hago mal?
A ver si alguien me hecha una mano, llevo desde la tarde con esto probando cosas y no lo consigo O_o
Muchas gracias!