No puedo ejecutar scripts con ajax

theroutermatic · #1 (**permalink**) 13/11/2012, 13:00

Buenas tardes. Disculpen la molestia, se que al momento de traer un HTML con ajax no interpreta cualquier script que contenga. Pero mi duda es.. Si los "src=" de los script los pongo en el index o la pagina que recarga al inicio deberían de funcionar no?

Estoy trayendo un slider de jflow y los scripts los tengo en el header del index, pero aun así no los ejecuta, que puede estar pasando? Gracias.

El html que traigo solo contiene eso.. HTML lo demas lo trato de hacer en el index pero no tengo resultados.

Gracias por su tiempo.

Esto es todo lo que me traigo con ajax:

Código HTML:

<!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>jFlow Plus</title>

</head>

<body>

<div id="ppal">
<span class="jFlowPrev"><div><img src="images/izquierda.jpg" /></div></span>
<div id="container">
<div id="mySlides">
    <div id="slide1">    
        <img src="images/imagen1.jpg" alt="Slide 1 jFlow Plus" />
	</div>    	
    <div id="slide2">
        <img src="images/imagen2.jpg" alt="Slide 2 jFlow Plus" />
    </div>   
	<div id="slide3">
        <img src="images/imagen4.jpg" alt="Slide 3 jFlow Plus" />
    </div>
    <div id="slide4">
        <img src="images/imagen5.jpg" alt="Slide 4 jFlow Plus" />
    </div>
    <div id="slide5">
        <img src="images/imagen6.jpg" alt="Slide 5 jFlow Plus" />
    </div>
</div>

<div id="myController">
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
</div>
</div>

<span class="jFlowNext"><div><img src="images/derecha.jpg" /></div></span>

</div>
</body>
</html>

stramin · #2 (**permalink**) 13/11/2012, 14:35

Cita:

Buenas tardes. Disculpen la molestia, se que al momento de traer un HTML con ajax no interpreta cualquier script que contenga. Pero mi duda es.. Si los "src=" de los script los pongo en el index o la pagina que recarga al inicio deberían de funcionar no?

Sip.

De todos modos si es posible ejecutar los scripts si los guardas en un tag conocido, por ejemplo entre tags <script></script> y luego "evaluas" el contenido, o sea:

if (GET_xmlhttp.responseText.indexOf("<script>") > -1) {
var x = GET_xmlhttp.responseText.indexOf("<script>") + "<script>".length;
var y = GET_xmlhttp.responseText.indexOf("</script>") - x;
eval(GET_xmlhttp.responseText.substr(x, y));
}

Cita:

Estoy trayendo un slider de jflow y los scripts los tengo en el header del index, pero aun así no los ejecuta, que puede estar pasando? Gracias.

El html que traigo solo contiene eso.. HTML lo demas lo trato de hacer en el index pero no tengo resultados.

Gracias por su tiempo.

Esto es todo lo que me traigo con ajax:

Seguramente el problema es que estás redeclarando el html y el body al traerlo nuevamente con ajax, o sea lo que deberías hacer es quitar todo esto:

Código HTML:

Ver original<!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>jFlow Plus</title>
 
</head>
 
<body>

y tambien todo esto:

Código HTML:

Ver original</body>
</html>

probemos así antes de revisar bien parte por parte.

theroutermatic · #3 (**permalink**) 13/11/2012, 16:16

Cita:

Iniciado por stramin

Sip.

Seguramente el problema es que estás redeclarando el html y el body al traerlo nuevamente con ajax, o sea lo que deberías hacer es quitar todo esto:

Código HTML:

Ver original<!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>jFlow Plus</title>
 
</head>
 
<body>

y tambien todo esto:

Código HTML:

Ver original</body>
</html>

probemos así antes de revisar bien parte por parte.

Gracias por responder stramin! Si estaba redeclarando pero ya lo quité y aún así no funciona. Lo raro es que si al HTML que traigo con ajax le agrego los scripts y lo ejecuto a parte si funciona perfectamente. Pero usando ajax no funciona.

Los script los pongo de la siguiente manera en el index y dentro del "head", yo no le veo ningun error:

Código HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="scripts/jflow.plus.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    $("#myController").jFlow({
			controller: ".jFlowControl", // must be class, use . sign
			slideWrapper : "#jFlowSlider", // must be id, use # sign
			slides: "#mySlides",  // the div where all your sliding divs are nested in
			selectedWrapper: "jFlowSelected",  // just pure text, no sign
			width: "638px",  // this is the width for the content-slider
			height: "311px",  // this is the height for the content-slider
			duration: 400,  // time in miliseconds to transition one slide
			prev: ".jFlowPrev", // must be class, use . sign
			next: ".jFlowNext", // must be class, use . sign
			auto: true	
    });
});
</script>

stramin · #4 (**permalink**) 14/11/2012, 05:36

Es normal, es por que lo que hace ajax es guardar el contenido de la página en una variable y luego escribe el contenido de esa variable en el documento, por lo tanto los scripts se convierten en solo texto.

por eso lo que se hace es usar esa función que te he puesto más arriba, o sea esta:

if (GET_xmlhttp.responseText.indexOf("<script>") > -1) {
var x = GET_xmlhttp.responseText.indexOf("<script>") + "<script>".length;
var y = GET_xmlhttp.responseText.indexOf("</script>") - x;
eval(GET_xmlhttp.responseText.substr(x, y));
}

dentro de la función ajax y despues del envío del contenido al documento, para que funcione, además debes cambiar este tag:

<script type="text/javascript">

por este:

<script>

y todo funcionará normalmente.

emprear · #5 (**permalink**) 14/11/2012, 09:34

Probablemente te esté sucediendo esto
http://foros.emprear.com/ajax/html-c.../deportes.html

mirá el uso de la función cargarRecursos()

Saludos

theroutermatic · #6 (**permalink**) 14/11/2012, 09:44

dentro de la función ajax y despues del envío del contenido al documento, para que funcione[/QUOTE]

Gracias nuevamente.

Lo he puesto de la siguiente manera:

Código HTML:

/*fUNCION PARA CARGAR EL ARCHIVO HTML*/
function Mostrar(pagina, id){
	var oid = document.getElementById(id);
	peticion_http.open("GET", pagina);
	peticion_http.onreadystatechange = function(){
		if(peticion_http.readyState == 4 && peticion_http.status == 200){
			oid.innerHTML = peticion_http.responseText;	
		}
	}
	peticion_http.send(null);
	

/*Aqui el codigo para que funcione el script*/
		if (GET_xmlhttp.responseText.indexOf("<script>") > -1) {
		var x = GET_xmlhttp.responseText.indexOf("<script>") + "<script>".length;
		var y = GET_xmlhttp.responseText.indexOf("</script>") - x;
		eval(GET_xmlhttp.responseText.substr(x, y));
		}
}

Si es así es que algo mal hay en otra parte por que no logro que funcione.

stramin · #7 (**permalink**) 14/11/2012, 10:18

En tu caso la variable tiene otro nombre (peticion_http), solo basta con cambiarle el nombre al fragmento que te pase, y he movido el send(null) al final:

Código Javascript:

Ver original/*fUNCION PARA CARGAR EL ARCHIVO HTML*/
function Mostrar(pagina, id){
    var oid = document.getElementById(id);
    peticion_http.open("GET", pagina);
    peticion_http.onreadystatechange = function(){
        if(peticion_http.readyState == 4 && peticion_http.status == 200){
            oid.innerHTML = peticion_http.responseText; 
/*Aqui el codigo para que funcione el script*/
        if (peticion_http.responseText.indexOf("<script>") > -1) {
        var x = peticion_http.responseText.indexOf("<script>") + "<script>".length;
        var y = peticion_http.responseText.indexOf("</script>") - x;
        eval(peticion_http.responseText.substr(x, y));
        }
        }
    }
    
 
    peticion_http.send(null);
}

NOTA: esto solo leerá un bloque de código script, no sirve si haces más de uno, así que deberías poner todos tus scripts dentro del mismo bloque, ejemplo

<script>
var=variabe1;
var=variabe2;
function funcion1(){
}
function funcion2(){
}
function funcion3(){
}
</script>

Emprear, es justamente eso lo que pasa :)

theroutermatic · #8 (**permalink**) 14/11/2012, 11:56

Pues no funcionó. Lo que no me está cargando es el jquery. Por que cuando crago a parte el html si funciona bien pero si le quito este script <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> reacciona de la misma manera que cando lo llevo con ajax.

stramin · #9 (**permalink**) 14/11/2012, 12:03

ah, eso no lo va a leer, solo va a leer lo que está dentro de <script></script> la llamada al archivo jquery puedes hacerlo en la página principal (en el head)

emprear · #10 (**permalink**) 14/11/2012, 12:21

Cita:

Iniciado por theroutermatic

Pues no funcionó. Lo que no me está cargando es el jquery. Por que cuando crago a parte el html si funciona bien pero si le quito este script <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> reacciona de la misma manera que cando lo llevo con ajax.

Utilizá la función cargarRecursos() que te mencioné y carga también de esa manera el jQuery desde el repositorio

SAludos

pollin14 · #11 (**permalink**) 14/11/2012, 13:27

Tu tienes el siguiente script:

Código Javascript:

Ver original<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="scripts/jflow.plus.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#myController").jFlow({
            controller: ".jFlowControl", // must be class, use . sign
            slideWrapper : "#jFlowSlider", // must be id, use # sign
            slides: "#mySlides",  // the div where all your sliding divs are nested in
            selectedWrapper: "jFlowSelected",  // just pure text, no sign
            width: "638px",  // this is the width for the content-slider
            height: "311px",  // this is the height for the content-slider
            duration: 400,  // time in miliseconds to transition one slide
            prev: ".jFlowPrev", // must be class, use . sign
            next: ".jFlowNext", // must be class, use . sign
            auto: true  
    });
});
</script>

La funcion $(document).ready(function() solo se ejecuta una vez cuando la pagina este completamente cargada. Ahora, $("#myController") no deberia tener nada dentro ya que su contenido sera cargado DESPUES de que la pagina sea cargada completamente. Por eso no funciona.

Lo que yo hago para asígnar eventos (o codigo javascript) a HTML cargado dinamicamente es lo siguiente.

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                
                $('#boton1').click(function(){
                    alert("Soy el boton 1 y mi evento fue asignado dentro de ready");
                })
                
                $('#boton2').click(function(){
                    alert("Soy el boton 2 y mi evento no sera asígnado porque todavia no existo");
                })
                
                $.ajax({
                    url:'boton2.html',
                    datatype: 'html',
                    success: function(html){
                        $('body').append(html);
                        
                        //Para asignarle un evento al boton 2 descomentar
                        //$('#boton2').click(function(){
                            //alert("Soy el boton 2 y mi evento fue asignado despues de que la solicitud ajax fue exitosa");
                        //})
                    }
                })
                
            })
        </script>
        <style>
            #boton1{
                height:50px;
                width:50px;
                background-color:red;
            }
            #boton2{
                height:50px;
                width:50px;
                background-color:blue;
            }
        </style>
    </head>
    <body>
        <div id="boton1">boton 1</div>
    </body>
</html>

boton2.html

Código HTML:

Ver original<div id="boton2">boton 2</div>

Prueba el codigo y estoy seguro que es lo que te pasa.

theroutermatic · #12 (**permalink**) 15/11/2012, 18:19

Gracias a los 3 por su ayuda. Al final con lo que me dijo stramin y pollin14 llegué a la solución.

Cita:

Iniciado por pollin14

La funcion $(document).ready(function() solo se ejecuta una vez cuando la pagina este completamente cargada. Ahora, $("#myController") no deberia tener nada dentro ya que su contenido sera cargado DESPUES de que la pagina sea cargada completamente. Por eso no funciona.

Cargue las librerias en el index y la pura función me la traje junto con el html ya que como me explicó pollin 14 no funciona si la cargo desde el index.

Y pues me traje solo esa parte del script como lo dijo stramin:

Cita:

Iniciado por stramin

Es normal, es por que lo que hace ajax es guardar el contenido de la página en una variable y luego escribe el contenido de esa variable en el documento, por lo tanto los scripts se convierten en solo texto.

por eso lo que se hace es usar esa función que te he puesto más arriba, o sea esta:

if (GET_xmlhttp.responseText.indexOf("<script>") > -1) {
var x = GET_xmlhttp.responseText.indexOf("<script>") + "<script>".length;
var y = GET_xmlhttp.responseText.indexOf("</script>") - x;
eval(GET_xmlhttp.responseText.substr(x, y));
}

dentro de la función ajax y despues del envío del contenido al documento, para que funcione, además debes cambiar este tag:

<script type="text/javascript">

por este:

<script>

y todo funcionará normalmente.

Creí que si cargaba todo en el index no tenia que haber problema. Bueno gracias por su ayuda y su tiempo.