javascript tras la carga de un div (alternativa)

xenon87 · #1 (**permalink**) 27/08/2008, 13:45

Hola gente,
Según he leido el problema de ejecutar javascript (decentemente) en ajax es una lata.

Encontré esta solución
http://www.formatoweb.com.ar/ajax/ejecutar_codigo_javascript_css_cargado_ajax.php

el ejemplo lo he probado y funciona, aunque no pinta nada. y solo ejecuta el javascript.

Entonces he partido de ahi, y he intentado poner en mi objeto ajax, tras el estado 4 las líneas que me parecieron importantes y necesarias : (a mi parecer)

Código PHP:

  var javascript=es_xml.getElementsByTagName("javascript")[0].childNodes[0].data;

                // Creo el nuevo JS

                var etiquetaScript=document.createElement("script");

                document.getElementsByTagName("head")[0].appendChild(etiquetaScript);

                etiquetaScript.text=javascript;

Mi función ajax que pinta lo demás en el div es esta.

Código PHP:

  function procesaAjax(ajax,capa){

    var capaContenedora = document.getElementById(capa);

    if(ajax.readyState==1){

            capaContenedora.innerHTML="Cargando...";

    }else if (ajax.readyState==4){

        if(ajax.status==200){

            // esto es lo nuevo

            if(ajax.responseXML){

                es_xml=ajax.responseXML;

                alert(es_xml.getElementsByTagName)

                var javascript=es_xml.getElementsByTagName("javascript")[0].childNodes[0].data;

                // Creo el nuevo JS

                var etiquetaScript=document.createElement("script");

                document.getElementsByTagName("head")[0].appendChild(etiquetaScript);

                etiquetaScript.text=javascript;

            }

            // fin esto es lo nuevo

 
            document.getElementById(capa).innerHTML=ajax.responseText;

        }else if(ajax.status==404){

            capaContenedora.innerHTML = "La dirección no existe";

        }else{

            capaContenedora.innerHTML = "Error: "+ajax.status;

        }

    }

 
}

Si envio al div una pagina que tiene formato xml pues ejecuta lo que está entre los comentarios "esto es lo nuevo".
Se supone que ha de recorrer el archivo xml buscando las etiquetas <javascript> para montarlas luego como <scripts> y ejecutarlos pero... el firebug me da esto cuando le envio un xml:

Código PHP:

  es_xml.getElementsByTagName("javascript")[0] is undefined

procesaAjax(XMLHttpRequest, "contenido_dinamico")ajax.js (línea 38)

onreadystatechange()()ajax.js (línea 72)

[Break on this error] var javascript=es_xml.getElementsByT...ame("javascript")[0].childNodes[0].data;

Pd; He leido las FAQS antes de postear y tal.
Pd2; Toda ayuda es bien recibida (y lo que no es ayuda)

GatorV · #2 (**permalink**) 27/08/2008, 14:15

Hola xenon87,

Más que un error de AJAX tu problema es en Javascript, ya que si ves el firebug te dice que es_xml.getElementByTagName("javascript") no te esta devolviendo un array, por lo que tu al poner [0] te marca un error.

Revisa la estructura de tu XML, para ver que estas descargando la información correcta.

Saludos.

xenon87 · #3 (**permalink**) 27/08/2008, 14:21

No lo veo

Este es el archivo que se carga en el div.
Si hubiera algo anormal, no deberia darme error? Esta mañana conseguí que el ajax me lo detectara como XML porque le faltaba en el header lo de "/n/n"... pero bueno, sigo mirando y no veo nada aparte de una etiqueta script con un javascript comentado (lo he probado sin esa linea también y no funciona)

Código PHP:

  <?php

$xml="<?xml version='1.0' encoding='ISO-8859-1'?>";

$xml.="<datos>";

$xml.="<javascript>alert(1)</javascript>";

$xml.='

<h1>Tecnolog&iacute;as del 2.0</h1>

<script>//mensajitos();</script>

<table width="100%">

    <tr>

        <td>

            <img src="i/contenido/tecnologias_1.jpg" class="img_seccion" />

        </td>

        <td width="70%">

            <p><b>Una combinaci&oacute;n de estas tecnolog&iacute;s en una web, la definen como web 2.0</b></p>

            <p>

                <ul>

                    <li>

                        XHTML - Lenguaje b&aacute;sico por etiquetas.<br />

                        Toda web necesita de este lenguaje de programaci&oacute;n para mostrar en el navegador los resultados.

                    </li>                   

                    <li>

                        CSS - Hojas de estilo<br />

                        Para cambiar el estilo de cualquier elemento de la web, con solo a&ntilde;adirle una propiedad.

                    </li>             

                    <li>

                        PHP - Dinamizaci&oacute;n de contenidos.<br />

                        Es el lenguaje de programaci&oacute;n m&aacute;s usado, tiene innumerables funciones para transformar una simple web, en una complejidad con unas l&iacute;neas de su c&oacute;digo.

                    </li>

                    <li>

                        Mysql - El tipo de base de datos m&aacute;s utilizado en los &uacute;ltimos a&ntilde;os.<br />

                        Pueden acoger cualquier tipo de dato o informaci&oacute;n para ser luego mostrada en web, por ejemplo.

                    </li>

                    <li>

                        Javascript - Cambia estaticamente el c&oacute;digo HTML generado de una web.<br />

                        Normalmente se usa para hacer validaciones de formulario, mostrar/ocultar capas...

                    </li>

                    <li>

                        Ajax - Servicios en segundo plano.<br />

                        S&oacute;n peticiones y respuestas que se cargan en capas. &Uacute;ltimamente est&aacute; de moda y &eacute;s muy &uacute;til para que los usuarios no deban recargar la p&aacute;gina todo el tiempo.

                    </li>

                </ul>

            </p>

        </td>

    </tr>

</table>

 
 
';

 
$xml.="</datos>";

header("Content-type: text/xml\n\n");

echo $xml;

?>

GatorV · #4 (**permalink**) 27/08/2008, 14:23

Con el firebug creo puedes hacer un debug a nivel DOM, deberias de hacer un alert( es_xml.getElementsByTagName("javascript")); a ver que es lo que te devuelve.

Saludos.

xenon87 · #5 (**permalink**) 27/08/2008, 15:03

Eso ya lo habia provado, me devuelve : "[object HTMLCollection]".

Gracias por las respuestas ^^

Panino5001 · #6 (**permalink**) 27/08/2008, 21:34

Tu xml tiene problemas. Con esté código de testeo y arreglando el xml, funciona sin problemas:

Código PHP:

  <!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=iso-8859-1" />

<title>test</title>

<script>

function $(id){return document.getElementById(id);}

 
function http(){

    if(window.XMLHttpRequest){

        return new XMLHttpRequest();    

    }else{

        try{

            return new ActiveXObject('Microsoft.XMLHTTP');

        }catch(e){

            alert('nop');

            return false;

        }    

    }

} 

function procesaAjax(){

    ajax=H;

    capa='pp';

    var capaContenedora = document.getElementById(capa);

    if(ajax.readyState==1){

            capaContenedora.innerHTML="Cargando...";

    }else if (ajax.readyState==4){

        if(ajax.status==200){

            // esto es lo nuevo

            if(ajax.responseXML){

                es_xml=ajax.responseXML;

                //alert(es_xml.getElementsByTagName)

                var javascript=es_xml.getElementsByTagName("javascript")[0].childNodes[0].data;

                // Creo el nuevo JS

                var etiquetaScript=document.createElement("script");

                document.getElementsByTagName("head")[0].appendChild(etiquetaScript);

                etiquetaScript.text=javascript;

            }

            // fin esto es lo nuevo

 
            document.getElementById(capa).innerHTML=ajax.responseText;

        }else if(ajax.status==404){

            capaContenedora.innerHTML = "La dirección no existe";

        }else{

            capaContenedora.innerHTML = "Error: "+ajax.status;

        }

    }

 
}  

var H;

window.onload=function(){

    var url='xml.php';

    H=new http();

    H.open('get',url+'?'+Math.random(),true);

    H.onreadystatechange=procesaAjax;

    H.send(null);

}

</script>

</head>

 
<body>

<div id="pp">dd</div>

</body>

</html>

El xml corregido es este:

Código PHP:

  <?php

$xml="<?xml version='1.0' encoding='ISO-8859-1'?>";

$xml.="<datos>";

$xml.="<javascript>alert(1)</javascript>";

$xml.='

<h1>Tecnologías del 2.0</h1>

<script>//mensajitos();</script>

<table width="100%">

    <tr>

        <td>

            <img src="i/contenido/tecnologias_1.jpg" class="img_seccion" />

        </td>

        <td width="70%">

            <p><b>Una combinación de estas tecnologías en una web, la definen como web 2.0</b></p>

            <p>

                <ul>

                    <li>

                        XHTML - Lenguaje básico por etiquetas.<br />

                        Toda web necesita de este lenguaje de programación para mostrar en el navegador los resultados.

                    </li>                   

                    <li>

                        CSS - Hojas de estilo<br />

                        Para cambiar el estilo de cualquier elemento de la web, con solo añadirle una propiedad.

                    </li>             

                    <li>

                        PHP - Dinamización de contenidos.<br />

                        Es el lenguaje de programación más usado, tiene innumerables funciones para transformar una simple web, en una complejidad con unas líneas de su código.

                    </li>

                    <li>

                        Mysql - El tipo de base de datos más utilizado en los últimos años.<br />

                        Pueden acoger cualquier tipo de dato o información para ser luego mostrada en web, por ejemplo.

                    </li>

                    <li>

                        Javascript - Cambia estaticamente el código HTML generado de una web.<br />

                        Normalmente se usa para hacer validaciones de formulario, mostrar/ocultar capas...

                    </li>

                    <li>

                        Ajax - Servicios en segundo plano.<br />

                        Son peticiones y respuestas que se cargan en capas. Útimamente estÁ de moda y es muy útil para que los usuarios no deban recargar la página todo el tiempo.

                    </li>

                </ul>

            </p>

        </td>

    </tr>

</table>

 
 
';

 
$xml.="</datos>";

header("Content-type: text/xml\n\n");

echo $xml;

?>

xenon87 · #7 (**permalink**) 28/08/2008, 02:17

Cual era el error de xml?

Ha sido coger tu xml y los alerts funcionaban.

Le he metido a mi ajax un bucle para que pudiera recoger todos los valores script de la página y así ejecutarlos todos.

Código PHP:

              if(ajax.responseXML){

                es_xml=ajax.responseXML;

                

                // esto recorre todos los elementos javascript de la pagina para poder ejecutarlos

                for(i=0;i<es_xml.getElementsByTagName('script').length;i++){

                    var javascript=es_xml.getElementsByTagName("script")[i].childNodes[0].data;

                    var etiquetaScript=document.createElement("script");

                    document.getElementsByTagName("head")[0].appendChild(etiquetaScript);

                    etiquetaScript.text=javascript;                            

                }

Funciona genial, aunque es una lástima que no coja las funciones cargadas en la página que contiene el div. (pero eso ya es otra historia)
gracias!

xenon87 · #8 (**permalink**) 04/09/2008, 01:58

He estado dándole vueltas al asunto... y me pregunto,
Por qué lo que cargo en el div me coje directamente el estilo css y no los scripts?

Porque si en el archivo que cargo le pongo las funciones a pelo me las ejecuta, pero las que están ya cargadas en un .js ajeno no funcionan.

GatorV · #9 (**permalink**) 05/09/2008, 14:16

Hola xenon87,

Esto es porque debes de extraer el atributo src de los scripts que traes desde AJAX, e insertarlos en la pagina actual y ejecutarlos.

Saludos.

xenon87 · #10 (**permalink**) 05/09/2008, 16:17

Eso lo entiendo, la duda era el por qué los estilos sí que los coje aún sin haber ningún link type="text/css" en el documento que cargo con ajax, y con javascript si que sea necesario hacerlo...

GatorV · #11 (**permalink**) 06/09/2008, 11:17

Eso es un inconveniente/seguridad del navegador y no de tu script.

Saludos.

xenon87 · #12 (**permalink**) 18/09/2008, 01:56

Cita:

Iniciado por GatorV

Hola xenon87,

Esto es porque debes de extraer el atributo src de los scripts que traes desde AJAX, e insertarlos en la pagina actual y ejecutarlos.

Saludos.

Esto me ha dado más dolores de cabeza de los que pensaba.
Encontré un buen ejemplo por internet (pero como no puedo poner links, pongo el fragmento de texto importante)

Código:

Attributes : In the XML file, the <employee> tag has 3 attributes. An attribute can be     accessed using childNodes(i).getAttribute("AttributeName"). Thus     xmlObj.childNodes(0).getAttribute("id") will return "001".
    xmlObj.childNodes(1).getAttribute("age") will return "24".
    xmlObj.childNodes(2).getAttribute("sex") will return "F".

En el ejemplo, la etiqueta <employee> tiene tres atributos, la id,edad y sexo. Para importar archivos javascript usaría solo dos, y creo que lo correcto sería algo así:

Código:

   xmlObj.childNodes(0).getAttribute("type") will return "text/javascript".
    xmlObj.childNodes(1).getAttribute("src") will return "js/funcion.js".

Bueno, y esta es la parte de mi código. La que recorre el archivo XML buscando etiquetas script.

Código:

            if(ajax.responseXML){
                es_xml=ajax.responseXML;
				
				// esto recorre todos los elementos javascript de la pagina para poder ejecutarlos
				for(i=0;i<es_xml.getElementsByTagName('script').length;i++){
					var javascript=es_xml.getElementsByTagName("script")[i].childNodes[0].data;
					var etiquetaScript=document.createElement("script");
					document.getElementsByTagName("head")[0].appendChild(etiquetaScript);
					etiquetaScript.text=javascript;							
				}				
				
            }

El problema de esto es que, si pongo "<script src="blabla.js"></script>, me da error, ya que no contiende nada la variable 'javascript', me dice que es null y el script peta.
Entonces... no tengo ni idea de donde poner lo de los atributos sin que me dé ningun error. Alguna sugerencia? Gracias :)

GatorV · #13 (**permalink**) 18/09/2008, 16:06

Haz checado que es_xml.getElementsByTagName("script")[i].childNodes[0].data, te regrese algo?

Saludos.

xenon87 · #14 (**permalink**) 18/09/2008, 22:51

Si si, a mi me funciona perfectamente.
Puedes ver un ejemplo desde aqui:
http://serra-project.es/principal.php
poniendo esto en el navegador:
javascript:cargar_pagina('pags/tecnologias_xml','contenido_dinamico')

tecnologias_xml.php es el xml que contiene un par de alerts.

Lo que yo quiero es que se carguen los scripts si en el xml le pongo un <script src="...">

GatorV · #15 (**permalink**) 19/09/2008, 13:50

Y lo haz probado?, no veo que extraigas el atributo SRC del script para agregarlo a tu DOM.

xenon87 · #16 (**permalink**) 19/09/2008, 22:58

las cosas que desarrollo no las pongo en el .es
y si,lo probé. Pero como los importes de javascript són así:
<script src="fsdmlds.js">ESTO ESTA VACIO</script>

pues me da un error diciendo que el tag script no contiene nada, y a partir de ahi el script se para.

GatorV · #17 (**permalink**) 21/09/2008, 20:45

Prueba usar <script src="fsdmlds.js" /> para que te interprete correctamente el nodo.

Saludos.