Problema al acceder a divs creados dinámicamente y asignarles scripts

Postconsumista · #1 (**permalink**) 28/07/2009, 02:42

Saludos a todos, tengo el siguiente problema, estoy creando una página que carga en un div de la pag padre otra página hija que a su vez contiene una serie de divs que quiero mostrar/ocultar con una función javascript pulsando un enlace.

Revisando el foro solucioné el problema de que se ejecutaran los scripts que venían en la página hija cargada dinámicamente gracias a la aportación de Maborak y de otros moderadores (gracias a todos).

El problema que tengo, es que cuando trato de acceder a alguno de los divs cargados dinámicamente con un getelementbyid en la consola de error de firefox me muestra el error "Cadena vacía pasada a getElementById()". Sin embargo, en el DOM inspector sí existen esos divs.

Aquí va el código de la página cargada dinámicamente:
(he incluido la función settimeout para que en teoría le diera tiempo a la página a cargar los divs; no pongo la página padre porque me carga bien la página hija y me hace correr bien scripts del tipo alert)

Código PHP:

  <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

 
<script type="text/javascript">

 
 
hasi= function() {

document.getElementById('irudi').style='none';

}

 
show=function(divid) {

document.getElementById(divid).style='block';

}

 
setTimeout('hasi()',2000); 

</script>

 
</head>

 
<body>

 
<div id="irudi" style="display:none;"><img src="irudiak/etiqueta_behean.jpg" /></div>

 
 
<div id="div2">DIV2: Dicho de un persona, de origen italiano.

</div>

 
<div id="div3">DIV3: 

</div>

 
<div id="pintx">

<a href="#" onclick=show('irudi');">pintxa hemen</a>

</div>

 
</body>

</html>

Mirando por el foro creo esto podría ayudar a varias personas con problemas con los divs dinámicos pero de momento no he encontrado la solución ni en libros ni en foros.

Nono Martínez · #2 (**permalink**) 28/07/2009, 08:32

Algunos divs tardan en cargarse dependiendo del contenido incluso puede ralentizar mucho una página si no tienes cuidado. Creo que el setTimeout que has puesto intenta corregir ese problema, pero corregirlo así es muy relativo, no siempre tiene la misma carga, tu setTimeout dependerá siempre del navegador, pc, conexion a red que tenga el usuario.

Va a sonar a tópico en estos foros pero yo normalmente uso jQuery para solucionar estas cosas. Tiene funciones que permiten lanzar javascript una vez, y seguramente plugins que te ayuden a manejar hijo y padre facilmente.

Para trabajar con selectores id revisa siempre que está encontrando los atributos id correctamente, además recuerda revisar que sean identificadores únicos para cada div.

<div id="irudi" style="display:none;"><img src="irudiak/etiqueta_behean.jpg" /></div>

Yo lo que veo es que ese atributo style="display:none" esta ocultando el div "irudi", y seguramente no puedas accesar a el cuando lo llama setTimeout (porque está oculto).

Revisa el código

Postconsumista · #3 (**permalink**) 28/07/2009, 13:57

Gracias por tu respuesta Nono. Justamente estaba investigando la librería jQuery. Al parecer existe un plugin llamado "Live Query" para jquery que permite acceder sin problemas a los divs dinámicamente cargados. Me pongo a empollarme el jquery y si consigo una solución la cuelgo aquí. (lo de poner el display:block al principio no funciona).

Postconsumista · #4 (**permalink**) 29/07/2009, 11:47

En fin, parece que con jquery ha sido posible. El problema es que no tengo ni idea de por qué. Finalmente he sido capaz de acceder y manejar propiedades css de divs cargados dinámicamente mediante ajax.

Por si alguien le pudiera interesar cuelgo la página padre que hace la llamada y la hija donde se cargan los divs que aparecen y desaparecen pulsando un botón. Allá va:

PÁGINA PADRE:

Código PHP:

  <HTML>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<script src="js/jquery-1.3.2.min.js" type="text/javascript"> </script>

 
<script type="text/javascript">

 
var x;

x=$(window);

x.ready(inicializarEventos);

 
function inicializarEventos()

{

  var x;

  x=$("#enlace a");

  x.click(kargatu);

}

 
function kargatu()

{

 
$.ajax({

   

 
    type:"GET",

    dataType: "html",    

    url: "alerta_jquery.html",

    success: llegada

    

       

});

 
}

 
 
var c=0;

 
llegada=function(msg){

 
        $("#pp").append(msg);

 

        //regularmente tendríamos aquí que re-ligar los eventos 

        $("#irudi").css("display", "block"); 

        

        $("#botoi").click(function(){ 

        

        

    

        if(c==0) { $("#irudi").css("display", "none");

        c=1; }

        else {

        if(c==1) { $("#irudi").css("display", "block");

        c=0; }}

        

        });

        

        }

        

        

 
</script>

 
</head>

 
<body>

 
<div id="enlace"><h1>bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h1>

 
<a href="#" >sakatu</a> 

 
</div>

 
 
 
<div id="pp">

</div>

 
</body>

</html>

PÁGINA HIJA:

Código PHP:

  <script type="text/javascript">

 
alerta=function()

{

alert("kaixo");

}

 
</script>

 
 
<h1>subpágina</h1>

 
<div id="enlace2">

<a href="#" onclick="alerta();">alert</a>

</div>

 
<div id="irudi" style="display:block">

<img src="irudiak/etiqueta_behean.jpg" />

</div>

 
<a href="#" id="botoi">mostrar/ocultar</a>

Pulsando el enlace "sakatu" de la página padre se hace la carga de ajax. En la función "llegada" está el asunto ya que es aquí donde se inicializa el valor de la css del div que se quiere hacer aparecer/desaparecer y para ello se asigna una función al boton "botoi".