Corrección Javascript en AJAX

[samy4ever]

Hola,

Tengo una página que lanza una consulta AJAX y me rellena un DIV (subcontainer).

El tema és que lo que me devuelve, usa código javascript (cargado en el index.html, donde hacemos la consulta AJAX)... Que no se me ejecuta.

He probado lo que habeis comentado por el foro del HOWTO:

Tengo el fichero interpretadorAjax cargado en el index.php, así como el JS que quiero ejecutar dentro del AJAX (que es un slideshow).

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

En el código AJAX tengo:

Código:

	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);
	var scs=myAjax.responseText.extractScript();    //capturamos los scripts 
        myDivUoTroLugar.innerHTML=myAjax.responseText 
        scs.evalScript();       //ahora si, comenzamos a interpretar todo  
	return false;
}

Supuestamente, así debería ejecutarse el código JS que sea ejecutado dentro de lo qué me devuelve AJAX, no? Qué hago mal?

[Adler]

Hola

Prueba así

var scs=myAjax.responseText.extractScript(); //capturamos los scripts
myDivUoTroLugar.innerHTML=myAjax.responseText.stripScript();
scs.evalScript(); //ahora si, comenzamos a interpretar todo

Suerte

[samy4ever]

Hola!

He probado lo que comentas pero no me funciona. Cuando miro la consola de errores de firefox me da el siguiente error:

myAjax is not defined.

He probado en dejarlo en "ajax" pero no funciona. Alguna idea? Tiene que ser algo conceptual, pero no veo el qué. Gracias por vuestro tiempo!

Código:

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);
	var scs=myAjax.responseText.extractScript();    //capturamos los scripts 
        myDivUoTroLugar.innerHTML=myAjax.responseText.stripScript();
        scs.evalScript();       //ahora si, comenzamos a interpretar todo  
	return false;
}

Y en el header del index.php tengo:

Código:

<script type="text/javascript" src="./funcions.js"></script>
<script type="text/javascript" src="./slide.js"></script>
<script type="text/javascript" src="./interpretadorAjax.js"></script>

[GatorV]

La parte de evaluar AJAX tienes que hacerlo en donde evaluas, en tu caso es en la funcion lanzamos_funcion.

Saludos.

[samy4ever]

[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!

[GatorV]

Lo que no entiendo es porque usas myAjax, cuando la variable bajo la que estas capturando el texto es xmlhttp.

Tienes que cargar los datos desde la respuesta de tu AJAX, en este caso es xmlhttp.responseText;

Saludos

[Adler]

Hola

Me sumo a lo que dice GatorV

Suerte

[MaBoRaK]

loading..............


Osea que debe ser así

function lanzamos_funcion() { // put data returned by requested URL to selected DIV
if (xmlhttp.readyState == 4) if (xmlhttp.status == 200)
var scs=xmlhttp.responseText.extractScript(); //capturamos los scripts
ajaxdestination.innerHTML=xmlhttp.responseText.stripScript();
scs.evalScript(); //ahora si, comenzamos a interpretar todo


document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;


}


connection closed.

[samy4ever]

Hola!

Vaya, había leído lo de gatorV esta tarde y al probarlo y venir aquí me habíais puesto el código y todo jejeje

Sí, cierto, no acababa de entender de donde venía myAjax:P (esto de ser novato!)

Ahora ya me funciona y me carga... O casi jeje

El código final me queda así (por si alquien busca lo mismo que yo).

Código:

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) 
  
    document.getElementById(ajaxdestination).innerHTML =xmlhttp.responseText;
	var scs=xmlhttp.responseText.extractScript();    //capturamos los scripts 
        ajaxdestination.innerHTML=xmlhttp.responseText.stripScript();
        scs.evalScript();       //ahora si, comenzamos a interpretar todo 
	
}

Aún y así, ahora se me han presentado algunos problemas que no se por donde cogerlos, a ver si me podeis orientar por donde van los tiros.

En Firefox, funciona. En IE, si viene devuelto de AJAX, no me funciona. ¿Por qué puede ser?

Otro problema que tengo es que si no viene devuelto de AJAX, se me cargan las imágenes correctamente. En cambio, si viene de AJAX, únicamente me monta cómo debería ir pero sin cargar imágenes (no se si las flechas van o no porqué no veo las imágenes).

Podeis observarlo directamente de la página: http://tecnotortest.site50.net

En la página principal sale el slideshow correctamente (bueno, se descentra, pero esto es un problema menor que ahora mismo me da lo mismo). Si le dais a la pestaña productos, vereis que se carga la presentación pero sin imágenes.

Me podeis orientar? Muchas gracias por vuestra ayuda!


EDIT: Curiosamente en chrome lo centra xD

[phinias]

Hola he Seguido Todos Los Pasos Que Mencionan En El How y En Este Post Pero No Me Funciona El Script Que Paso MaBoRaK, Mi Problema Es El Siguiente:
Necesito Cargar En El DIV Un Form De Contactenos El Cual Tiene Un tinyMCE Para Su Textarea
Necesito Cargar Una Galeria De Fotos En Un DIV.

Yo Hice Los Siguientes Pasos,Cree El Archivo interpretadorAjax.js y Lo Inclui En El Index , Tambien Creo El Objeto Ajax En Un Archivo ajax.js El Cual Tambien Incluyo En El Index
Inclui Tambien Todos Archivos js Necesarios Para La Galeria y EL tinyMCE.
Que Puedo Estar Haciendo Mal Espero Me Puedan Ayudar