Ejecutar javascripts dentro de ajax

pepetpm · #1 (**permalink**) 19/10/2012, 04:56

Buenas tengo un problema que no se como hacer ejecutar un codigo javascript que viene de la respuesta de un ajax, espero que me podais ayudar. GRACIAS!!

prueba.html es donde creo la llamada.

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 type="text/javascript">
function llamarajax(idioma) {
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)  {
		  document.getElementById('mostrar').innerHTML=xmlhttp.responseText;
	  }
	}
	xmlhttp.open("GET","prueba2.html",true);
	xmlhttp.send();
	
}
</script>
</head>

<body>
<input type="button" id="boton" name="boton" value="mostrar" onclick="llamarajax()" />
<div id="mostrar"></div>
</body>
</html>

prueba2.html es el que cargo mediente ajax

Código:

contenido ajax
<script type="text/javascript">alert("hola");</script>

IsaBelM · #2 (**permalink**) 19/10/2012, 06:47

te has perdido en el camino. con ese código lo que consigues es traer todo el html de prueba2.html

haz estos cambios
prueba.html

Cita:

if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('mostrar').innerHTML=xmlht tp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","prueba2.php",true);

prueba2.php

Cita:

echo 'hola';

esta es una de las maneras de hacerlo

pepetpm · #3 (**permalink**) 19/10/2012, 06:54

Cita:

Iniciado por IsaBelM

te has perdido en el camino. con ese código lo que consigues es traer todo el html de prueba2.html

haz estos cambios
prueba.html

prueba2.php

esta es una de las maneras de hacerlo

Con este codigo que me has puesto no ejecutas ningun javascript en el segundo fichero, yo lo que quiero es poder ejecutar codigo javascript en el prueba2.html

IsaBelM · #4 (**permalink**) 19/10/2012, 07:20

de lo que tu quieres, a lo que se puede hacer, hay un trecho insalvable

Cita:

Iniciado por pepetpm

Con este codigo que me has puesto no ejecutas ningun javascript en el segundo fichero, yo lo que quiero es poder ejecutar codigo javascript en el prueba2.html

por supuesto que se levanta el alert. sólo has de mirar la consola y verás el porqué no te funciona

tengo que evitar usar la etiqueta [QUOTE]
tengo que evitar usar la etiqueta [QUOTE]
tengo que evitar usar la etiqueta [QUOTE]
tengo que evitar usar la etiqueta [QUOTE]
.......

después continuo hasta copiarlo 1000 veces

marlanga · #5 (**permalink**) 19/10/2012, 11:48

Aquí ya se discutió el asunto (y además aprendí una nueva y mejor alternativa para cargar javascript por ajax):

http://www.forosdelweb.com/f13/probl...-ajax-1018046/

La idea es dividir lo que quieres cargar por ajax en tres trozos: Un html (o php, si necesitar procesamiento de servidor) donde sólo habrán etiquetas HTML (con contenido), un fichero CSS donde irán los estilos, y un fichero JS donde irá absolutamente todo el javascript. Puede que el CSS no lo necesites, pero la idea es la misma.

Usas AJAX sñolo para recuperar el HTML, y cuando esté cargado (en su onload, si usas javascript a pelo, o en el success, si usas jquery), crear un elemento y cargarlo con

Código Javascript:

Ver originalvar archivo=document.createElement("script");
archivo.setAttribute("type","text/javascript");
archivo.setAttribute("src", ...ruta...);

si es javascript, o

Código Javascript:

Ver originalvar archivo=document.createElement("link");
archivo.setAttribute("rel", "stylesheet");
archivo.setAttribute("type", "text/css");
archivo.setAttribute("href", ...ruta...);

si es una hoja de estilos css.

Al decirle su SRC o HREF, el elemento empezará a cargarse. Cuando el elemento se cargue completamente,automáticamente se ejecutará o se aplicarán sus estilos en el documento que ha hecho la llamada AJAX. Pero ojo, se aplicarán en TODO el documento, por lo tanto, asegurate de usar ID's y clases únicas si no quieres que el jaavscript o el CSS actúe también sobre la página principal.

IsaBelM · #6 (**permalink**) 19/10/2012, 14:37

Cita:

Iniciado por marlanga

Aquí ya se discutió el asunto (y además aprendí una nueva y mejor alternativa para cargar javascript por ajax):

creo que no lo has entendido

Cita:

Iniciado por pepetpm

Con este codigo que me has puesto no ejecutas ningun javascript en el segundo fichero, yo lo que quiero es poder ejecutar codigo javascript en el prueba2.html

marlanga · #7 (**permalink**) 19/10/2012, 15:13

Cita:

Iniciado por IsaBelM

creo que no lo has entendido

No estoy de acuerdo. Yo creo que eres tú la que no ha entendido lo que pepetpm quiere.

Él quiere ejecutar el código javascript que está contenido en un HTML que recuperará por AJAX.
Yo usaba una medio chapuza en JSON, pero en el hilo que enlazo vi una forma elegante de resolver el problema, con document.createElement.

Lo que no se puede hacer es recuperar directamente un archivo html con HTML y javascript dentro y hacer que se ejecute su javascript en cuando ajax lo cargue.

IsaBelM · #8 (**permalink**) 19/10/2012, 15:25

yo no interpreto las posibles intenciones que tenga. me baso en lo que dice

Cita:

ejecutar codigo javascript en el prueba2.html

y para evaluar javascript que viene de una petición ajax mejor este prototype

marlanga · #9 (**permalink**) 19/10/2012, 15:32

El algoritmo de ese enlace, no es ni mejor ni peor. Ejecuta el script de la misma forma, con un createElement.
La diferencia es que ese algoritmo ejecuta scripts que están escritos dentro del HEAD del HTML, y el que yo he puesto (que aprendía de emprear) sirve para cargar archivos .js

Panino5001 · #10 (**permalink**) 19/10/2012, 15:41

marlanga, contestás sin analizar el prototype que menciona Isabel. Igualmente estoy de acuerdo en que no es ni mejor ni peor. No estoy de acuerdo en que no cargue archivos javascripts si es que son solicitados en el responseText

IsaBelM · #11 (**permalink**) 19/10/2012, 16:22

sólo decir que cuando dije "mejor" no me refería a mejor o peor. sino mejor para el caso que se está tratando. no parece que el tenga un archivo que se llame xxxxx.js, sino que el js ya viene en la respuesta

emprear · #12 (**permalink**) 19/10/2012, 17:02

El tema del alert no es el mejor ejemplo, y lo digo por lo siguiente, es el ejemplo que citó @marlanga

http://foros.emprear.com/ajax/html-css-js-ajax/

para las pruebas utilicen el botón "golf" en deportes.html
Nunca terminé de investigar porque el alert() directamente en el evento onclick funciona y llamandolo en una función "incrustada" con
<script>
.....
</script>
en el propio html que se carga no.

Saludos

IsaBelM · #13 (**permalink**) 19/10/2012, 17:24

la función alert_en_script esta indefinida ya que no existe como tal. está tratada como texto. usa el código de panino y funcionará. por que éste evalua el javascript que trae la respuesta y por lo tanto es accesible

aunque no me hagas mucho caso por que estoy casi dormida ya a estas horas

emprear · #14 (**permalink**) 19/10/2012, 17:46

Cita:

Iniciado por IsaBelM

aunque no me hagas mucho caso por que estoy casi dormida ya a estas horas

Modesta, vos sonámbula le pasás el tarpo a más de uno en esto.

Si, de acuerdo, ya sé que no funciona, lo puse así para que se vieran las diferencias, mi solución es siempre poner todo javascript en la página cargada en archivos externos.
Lo que me sigue generando dudas es el onclick="alert('texto');" en algún elemento, ya que si funciona y a su vez, si golf.html tiene

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
function alert_en_script(mensaje){
alert(mensaje);
}
alert('hola');
window.onload = alert('gracias');
//]]>
</script>

los 2 últimos alerts no funcionan al cargarlos en deportes.html, y ahi no hay funciones no definidas. Si abrís golf.html directamente si funcionarán

SAludos

angel1993 · #15 (**permalink**) 19/10/2012, 17:59

Yo te entiendo! jajajaja mira esto..
http://www.forosdelweb.com/f13/estra...cript-1017418/
Lo que tienes que hacer es pillar el contenido de script, crear un script nuevo y enviarlo al head para que el navegador lo detecte, en ese enlace sale como...

marlanga · #16 (**permalink**) 20/10/2012, 07:30

Cita:

Iniciado por Panino5001

marlanga, contestás sin analizar el prototype que menciona Isabel. Igualmente estoy de acuerdo en que no es ni mejor ni peor. No estoy de acuerdo en que no cargue archivos javascripts si es que son solicitados en el responseText

Sí, me colé.
Pero es bueno ver que al fin, el hilo evoluciona hacia lo que pepetpm quería.

IsaBelM · #17 (**permalink**) 20/10/2012, 07:35

la explicación viene a ser la misma. veamos por que unos funcionan y otros no

mensaje() - funciona por que es el nombre de una función que existe en un js externo cargado previamente
alert('Este alert se genera directamente desde un evento onclick') - funciona por que alert es nativo de js
alert_en_script('Este alert esta pasado en una función escrita en el propio golf.html') - no funciona por que alert_en_script() es simple texto
alert('hola') y window.onload = alert('gracias') - no funcionan por la misma razón

entonces cuando abres golf.html, se ejecuta

Cita:

sin embargo cuando es traido como respuesta a la petición

Cita:

'<script type="text/javascript">
//<![CDATA[
function alert_en_script(mensaje){
alert(mensaje);
}
alert('hola');
window.onload = alert('gracias');
//]]>
</script>'

es un string

emprear · #18 (**permalink**) 20/10/2012, 08:14

Convengamos primero que la respuesta al problema ya la tenemos.
Ahora a tu explicación
Viéndolo así, parece fácil de entender, pero la hice más complicada,
http://foros.emprear.com/ajax/html-css-js-ajax/
ahora el ejemplo está en el botón "fútbol", una vez cargado el html, utilizá el botón "agregar filas", antes y después de cargar los js y css asociados.
Ese comportamiento sigue despistándome un poco

Saludos

marlanga · #19 (**permalink**) 20/10/2012, 08:56

El navegador web está programado para ejecutar cuando carga una pagina y en cuanto lo lea, todo código que se encuentre dentro de una etiqueta <SCRIPT>, independientemente de si está en un archivo aparte o no. Lo ejecuta en cuanto lo lee, no espera a que la página termine de cargarse (para eso existe el eventos window.onload).

El código javascript puesto dentro de elementos HTML no se ejecuta, salvo que se produzca el evento al que está asociado (onclick, onchange, etc). Eso quiere decir que si no depende de ningún script, siempre funcionará. Y en el caso de que dependa de otro script, funcionará si aquél script ya fue cargado en memoria.

http://jsfiddle.net/marlanga/Ttgvj/

Particularmente, siempre evito poner javascript dentro de los elementos HTML. Igual que hace años que se recomienda sacar todo el formato visual de los elementos HTML a las hojas de estilos, quedando prohibido usar el atributo STYLE de los elementos, con javascript pasa tres cuartos de lo mismo.
para enlazar elementos HTML y javascript ya tenemos los

elemento.ONevento o su forma más elegante elemento.addEventListener(evento,funcion);
Esa función también tiene un tercer parámetro, que sirve para elegir la forma en la que quieres que se disparen los eventos (en el DOM, si del padre al hijo, o del hijo al padre).

emprear · #20 (**permalink**) 20/10/2012, 09:20

En la práctica está muy claro, pero el siguiente enunciado

Cita:

Iniciado por marlanga

El navegador web está programado para ejecutar cuando carga una pagina y en cuanto lo lea, todo código que se encuentre dentro de una etiqueta <SCRIPT>, independientemente de si está en un archivo aparte o no. Lo ejecuta en cuanto lo lee, no espera a que la página termine de cargarse (para eso existe el eventos window.onload).

sigue resultándo confuso, que se supone que debería suceder con

Código Javascript:

Ver original<script>
alert('hola');
</script>

ó

Código Javascript:

Ver original<script>
window.onload = alert('hola');
</script>

marlanga · #21 (**permalink**) 20/10/2012, 09:37

Las paginas web se manda en paquetes secuenciales, es decir, un servidor te manda los paquetes en orden.

Los nagevadores web no esperan a recibir todos los paquetes para montar y mostrar la página. Va montando y mostrando la página conforme recibe paquetes.

Cuando el navegador ha leído el script, lo ejecuta. No espera a tener todos los paquetes de la página.

Con el primer script que has puesto, ejecutaría el alert.
Con el segundo script, también lo ejecutaría. Solo que ésta vez, lo que ejecuta es un "observador" de eventos, en concreto, el observador esperará a que el objeto window ejecuto su evento "loaded".

Tras ejecutar ese script, el navegador seguirá esperando recibir mas paquetes, y mostrándolos conforme le llegan. Cuando el último paquete llega con éxito, el navegador disparará el window.onload.

Ojo, el cuerpo (código fuente) de un HTML solo es texto. Las imágenes (en general, todos los llamados recursos) son peticiones que se harán asíncronamente, su descarga no afecta al evento load del window.

emprear · #22 (**permalink**) 20/10/2012, 09:43

Cita:

Iniciado por marlanga

Con el primer script que has puesto, ejecutaría el alert.
Con el segundo script, también lo ejecutaría.

El caso es que no se ejecuta en ninguno de los dos casos

marlanga · #23 (**permalink**) 20/10/2012, 09:44

¿No se ejecuta cuando?¿Cuando cargas las paginas con esos script por AJAX?
Ajax devuelve siempre texto (JSON y XML son formatos de cadenas de texto, pero texto al fin y al cabo). No ejecuta nada.

Si ese texto recibido por AJAX se lo metes a otro elemento al navegador, el "proceso" que convierte el texto en elementos HTML visuales sigue funcionando. Pero el "proceso" que ejecuta los scripts conforme los lee no. Para eso yo usaba antes un eval, y tú fuiste el que puso que el "createElement("script") también fuerza al navegador a ajecutar scripts a posterior si los metes dinámicamente en el HEAD.

emprear · #24 (**permalink**) 20/10/2012, 09:54

Cita:

Iniciado por marlanga

¿No se ejecuta cuando?¿Cuando cargas las paginas con esos script por AJAX?

De eso trata el post no de otra cosa

marlanga · #25 (**permalink**) 20/10/2012, 10:08

Edité justo antes de que escribieras otro post.

emprear · #26 (**permalink**) 20/10/2012, 10:15

Cita:

Iniciado por marlanga

Edité justo antes de que escribieras otro post.

Si ya entiendo, es como más arriba dijiste muy atinadamente

Cita:

Pero es bueno ver que al fin, el hilo evoluciona hacia lo que pepetpm quería.

pienso que toda tu diatriba teórica en http://www.forosdelweb.com/f13/ejecu...5/#post4294824 solo va a prestar a confusión

Saludos

marlanga · #27 (**permalink**) 20/10/2012, 10:24

Pienso que toda mi "diatriba" teórica explica por qué los scripts cargados con AJAX no funcionan.
Siento que no lo hayas entendido; quizás no me haya explicado bien.

emprear · #28 (**permalink**) 20/10/2012, 11:04

Cita:

Iniciado por marlanga

Pienso que toda mi "diatriba" teórica explica por qué los scripts cargados con AJAX no funcionan.
Siento que no lo hayas entendido; quizás no me haya explicado bien.

Es justo la respuesta que esperaba, está visto que escribes mucho y lees muy poco

marlanga · #29 (**permalink**) 20/10/2012, 11:19

Es justo la respuesta que esperaba, en alguien que lee con prejuicios.

Ahora te pregunto. ¿Has entendido con todo lo que he escrito, por qué no funciona <script> insertado dentro de cualquier elemento de HTML dinámicamente, y sí lo hace, si insertas un script en el HEAD?

emprear · #30 (**permalink**) 20/10/2012, 11:54

Cita:

Iniciado por marlanga

Es justo la respuesta que esperaba,

Asusta tu originalidad.
La página que deje no tiene más cometido que ser un ejemplo
Mis scripts funcionan perfectamente, incluso las que "no funcionan" ya que forman parte del ejemplo mismo, a manera de referencia.
Yo no tengo prejuicios, más bien tengo "postjuicios", puesto que mi observación fue lisa y llanamente a la , repito, diatriba, con la que te despachaste haciendo alusión a un ejemplo que no se aplica, ya que insisto el tema es "Ejecutar javascripts dentro de ajax".

Probablemente sepas mucho de javascript, pero en cuanto a tu forma (y este no es el primer caso) de seguir los hilos de un post, deja bastante que desear.

Seguramente insistirás en tu capricho, pero yo no puedo, lamentablemente, hacerme cargo de tus limitaciones