Cargar contenido html en un div, pero el html contiene javascript -.-

[okram]

Hola amigos foreros... bueno es mi primer post en los foros de ajax, de hecho hace unas pocas semanas recien comence con AJAX...

Mi pregunta es esta: tengo una pagina inicial con una tabla que tiene un area de menu y un area de contenido. El area de contenido es un <div> que inicialmente no tiene datos algunos..... aqui posteo mi codigo:

Código HTML:

<table align="center" border="0" cellspacing="4" cellpadding="5" width="750">

  <tr>
      
    <td class="border" bgcolor="#bb9966" colspan=2>
      
      CABECERA
        
    </td>
    
  </tr>

  <tr>
      
    <td class="border" bgcolor="#FFFFFF" colspan=2>
      
      <table width="715" align=center>
      
        <tr>
        
          <td align=left width=110>
          
            MAS CABECERAS
            
          </td>
        
          <td align=left class="header" width=250>
          
            MAS CABECERAS
            
          </td>
        
          <td align=left width=0>
          
            <div id="msgdiv" align=center></div>
            
          </td>
          
          <td align=right>
          
            MAS CABECERAS :P
            
          </td>
        
        </tr>
      
      </table>
        
    </td>
    
  </tr>
  
  <tr>
      
    <td class="border" valign="top" width="150" bgcolor="#FFFFFF">
      
      AQUI EL MENU
        
    </td>

    <td class="border" width="580" valign="top" bgcolor="#FFFFFF">

      <div id="content"></div>

    </td>
    
  </tr>

</table> 

bueno basicamente ese es el codigo de mi plantilla para index.php

luego, la funcion que cargara los contenidos:

Código:

<script language="Javascript">

function LoadElement(page) {
  try {
    xmlvar = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlvar = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlvar = false;
    }
  }
  if (!xmlvar && typeof XMLHttpRequest!='undefined') {
    xmlvar = new XMLHttpRequest();
  }
  
  xmlvar_URL="exec.php?action=load&mode="+page;
  xmlvar.open("GET",xmlvar_URL,true);
  xmlvar.onreadystatechange=function() {
    if(xmlvar.readyState==4) {
      document.getElementById('content').innerHTML = xmlvar.responseText;
    }
  }
  xmlvar.send(null);
}
</script>

basicamente eso... la funcion LoadElement(page) cargara el contenido de page en el div que tiene como id -> content...

OSEA, la funcion procesara y cargara una plantilla html en el espacio del contenido de la pagina index...

el problema es este: algunas de las plantillas que debo cargar usan funciones javascript, las cuales las defino dentro de esas mismas plantillas. Pero al cargarlas en el index me lanza un error diciendo que la funcion x no esta definida

EJEMPLO

mi plantilla:

Código HTML:

<script language="Javascript">
function loquesea() {
document.getElementById('algo').style.visibility = "hidden";
}
</script>
<a href="#" onclick="loquesea();">Click</a> 

si la cargo directamente funciona bien, pero al abrirla con la funcion LoadElement(), se carga el contenido en el div de contenido, pero las funciones de javascript no quedan definidas...

necesito ayuda urgenteeeee

[Hexclectiomicron]

La forma correcta de añadir un script a un documento es mediante DOM, asi:

Código:

tuScript= document.createElement("script");
//pudiendo añadir un archivo Js externo asi:
// tuScript.src="bla.js";
//o bien directamente el codigo:
tuScript.innerHTML=ElCodigoJavascript;
document.head.appendChild(tuScript);

Para ésto, tendrias q diferenciar el simple HTML del JS en tus "plantillas", una solucion q se me ocurre, aprovechando las capacidades del AJAX, es usar archivos XML en ves de "HTML con JS dentro", algo asi:

Código:

<elJavascript>
function loquesea() {
document.getElementById('algo').style.visibility = "hidden";
}
</elJavascript>

<elHTML>
<a href="#" onclick="loquesea();">Click</a>
</elHTML>

(tuplantilla.xml)

Mediante AJAX, obtienes el XML (usar responseXML en ves de responseText), y añades cada cosa a su lugar, elJavascript al HEAD y elHTML a tu DIV.

Saludos, hex.

[okram]

Bueno la verdad nunca use XML, estuve probando para solucionar mi problema, pero me saltan errores:

suponiendo que en mi exec.php que procesa la solicitud tengo esto:

Código PHP:

  <?php
$plantilla = '<?xml version="1.0" standalone="yes"?>
<serv>

<myjs>
function ProcessForm() {
  location.replace("form.php");
}
</myjs>

<myhtml>
Texto <a href="javascript:ProcessForm()">Link</a>
</myhtml>

</serv>';
echo $plantilla;
?>   

y luego de parsear todo me manda solo Texto, mas no el link....

La estructura del XML que se genera es esta:
{CODE]
<serv>
−
<myjs>

function ProcessForm(target) {
location.replace('form.php');
}
</myjs>
−
<myhtml>

Texto
<a href="javascript:ProcessForm('updprof')">Link</a>
</myhtml>
</serv>

[/code]
Igual si en mi plantilla tengo campos input:

<input type=text name=campo1 size=20>

Me manda que se esperaba una etiqueta </input>
........

Osea parace que esta considerando como etiquetas XML :S el codigo de <myhtml> :S:S:S

alguna idea??

gracias

[okram]

Bueno, el problema ese ya lo solucione...

lo uqe faltaba era crear el elemento head:

var head = document.getElementsByTagName('head')[0];

ahora tengo otro problema... EL codigo anda perfectamente bien en Firefox, mas no en IE (6)... He estado probando de diversas maneras y no anda. El IE me manda un error de javascript: Error desconocido en tiempo de ejecucion.

Sorteando varias posibilidades, llegue a la conclusion de que el error esta en esta linea:

script.innerHTML=codigo;

La plantilla ahora es un XML como me dijeron aqui, con dos elementos: <myjs> y <myhtml>. En el primero tengo el codigo javascript y en el segundo el html. EL codigo que uso despues de procesar el pedido es este:

Código:

        contenido = xmlvar.responseXML.documentElement;
        var jsp = contenido.getElementsByTagName('myjs')[0].firstChild.data;
        var htmlp = contenido.getElementsByTagName('myhtml')[0].firstChild.data;
        var head = document.getElementsByTagName('head')[0];
        script = document.createElement("script");
        script.id='form'
        script.defer=true;
        script.innerHTML=jsp;
        head.appendChild(script);

Sin embargo, si en vez de usar un innerHTML inserto esta linea:

script.src='algun_script.js';

si me carga los scripts en ambos exploradores

Esta BASURA del IE otra vez malogrando mi trabajo...

Alguna idea para solucionar esto??

Gracias

[zaqpz]

Prueba en lugar de poner script.innerHTML=... colocar script.text=... y nos cuentas.

Saludos.

[okram]

Bueno se agradece la ayuda, aunque el problema ya fue solucionado:

http://www.forosdelweb.com/f13/anadir-script-documento-usando-innerhtml-con-ie-396552/

De todas maneras muchas gracias zaqpz, y gracias tmb por tus ejemplos de ajax, realmente me son muy utiles

Un Saludo