En un arbol jerarquico, ¿Cómo mostrar los hijos con Ajax?

Saludos:

Ante todo comentar que soy un programador que nunca he recurrido a los foros, puesto que suelo buscar información o posteos. Pero si pido esta vez ayuda es porque realmente estoy atascado..

Situación:

Tengo que realizar un análisis textual de un foro, es decir, traer de una base de datos MySQL los mensajes, y mostrar tanto los posts iniciales como las respuestas a estos (acompañados de otra información que no viene al caso).

Situación actual:

He conseguido mostrar tanto los mensajes "padre" como sus hijos en jerarquía, de la forma:

- Padre 1
--- Hijo 1.1
------Hijo 1.1.1
------Hijo 1.1.2
- Padre 2
- Padre 3
--- Hijo 3.1

Pero se me pide que a la izquierda de cada padre, se muestre un simbolo + que al pulsarlo, despliegue todas las respuestas de sus hijos, sean del nivel que sean.

Contexto:

Estoy usando PHP con MySQL, y JavaScript y Ajax para estos casos. Para la representación del árbol he utilizado este FAQ:
http://www.forosdelweb.com/wiki/PHP:%C2%BFC%C3%B3mo_crear_un_%C3%A1rbol_jer%C3%A1rquico_a_partir_de_una_tabla_en_la_DB%3F

Mi problema:

No se como hacer que cada padre muestre a todos los hijos. Estoy probando con un evento sobre una imagen (+), que llama a una funcion de Java para mostrar/ocultar a los hijos.

Mi código (PHP):

Código PHP :

while(lee filas de MySQL->tanto posts iniciales como hijos)
{
if($row[5]!=0) // Accede si el padre no es 0, es decir, los hijos
{
  echo '<tr id="contenedorRespuesta'.$row[5].'" style="display:none">;
  // Aqui van la filas hijas (ocultas)
  echo '</tr>';
}
else // Accede si son posts iniciales
{
  echo '<tr><img src="IMAGEN" onClick="cargaContenidoRespuestas('.$row[0].')"/></td>  //Aqui van los mensajes padre</tr>
}
}

El problema es que yo llamo a cada fila hija con el id del padre (lo lógico sería llamar a cada fila con el id del post propio, pero...¿como sabría el padre a quien llamar por onclick?

En resumen, al tener las filas hijas el mismo id (ya que el padre es el mismo), cuando le doy a cada simbolo + solo se muestra uno de los hijos. ¿Alguien podría orientarme?

Otro problema es que los posts que no sean del primer nivel no se podran mostrar, puesto que su padre no es el post inicial.

Muchísimas gracias de antemano.

hola jomafer, resulta que tambien soy de la misma situacion tuya en cuanto a foros, estoy en proceso de reconciliandome con ellos. bueno sobre tu caso ufff que peluo jajaja, pero se me ocurre que si haces el arbol en vez de construir el html de la tabla utilices un arbol seteado con css a traves de <UL>y <li> donde cada padre es un nuevo item de la lista donde sus hijos y subhijos van albargados dentro de el. su sistaxis basicas son asi, enviame un mensaje privado y te envio los archivos por correo con mas detalle.

<ul id="menu1">
<li name="10">CARPETA1
<ul>
<li name="11">sub 1.1
<ul>
<li><a href="">bla bla A</a></li>
<li><a href="#">bla bla B</a></li>
</ul>
</li>
</ul>
</li>
<li>CARPETA2
<ul>
<li><a href="#">Modularizaci&oacute;n</a></li>
<li>sub 2.1
<ul>
<li><a href="#">bla bla E</a></li>
<li><a href="#">bla bla F</a></li>
<li><a href="#">bla bla G</a></li>
</ul>
</li>
<li><a href="#">BLA BLA </a></li>
<li><a href="#">BLA BLA </a></li>
</ul>
</li>
</ul>

Hola machvk!

Ante todo gracias por tu respuesta tan detallada. Lo de los árboles seteados lo estuve mirando, aunque no profundicé mucho por ver si lo lograba de esta forma.

He logrado meter en un vector tipo $hijos[$i] todos los hijos de cada padre, es decir, para cada padre, existe una variable $hijos[] que contiene los id de todos los hijos.

Si consiguiera pasar esta variable desde PHP a JAVASCRIPT mi problema estaría resuelto, pero no se yo si es posible.

Mi intención es pasarla, luego desde JavaScript con un bucle llamar a cada hijo de la forma:

Código Javascript :

var contenedorRespuesta=document.getElementById("contenedorRespuesta"+i);

if(contenedorRespuesta.style.display == "") contenedorRespuesta.style.display = "none";
  else contenedorRespuesta.style.display = "";

Pero claro, no se si se puede como dije.

Un saludo y muchísimas gracias de antemano.

La verdad es que gracias a gente como tu, hace que esté dispuesto a ayudar a otros, en lo que mi conocimiento pueda.

Creo que, sin querer, sobre complicas el problema.
En vez de usar AJAX para recibir los hijos, crea la lista completa, padres e hijos, como te dice machvk. Luego, usa Javascript para para mostrar/ocultar los hijos de cada padre, como si de un acordión se tratase.
Es mucho más sencillo y te evitas las llamadas constantes al servidor, porque cargas una sola vez la data que necesitas

quizas esta es una solucion media trucha, penca, ordinaria, poco elegante.

en ocasiones cuando necesito pasar cosas de php a javascript, lo que hago es cargar los datos en un input type=hidden, ese campo del formulario lo leo con javascript, si son muchos los cargo con algun divisor- para hacer un split sobre ella y pasar todo a un arreglo.

y asi obtengo los datos del php al javascript.

te servira¿¿??

Saludos! muchísimas gracias por vuestra ayuda!

Os comento, antes de "formatear" casi todo el proyecto por el árbol, decidí ir a por todas e hice lo siguiente:

Puesto que cada padre sabe TODOS sus hijos, y mi problema era que no sabía como pasárselos a Ajax, ¿Por qué no pasarselos como cadena?

Y eso hice, se los he pasado de la forma: consulta MySQL

Código Javascript :

$cadHijos ="";
while ($rowHijos = mysql_fetch_array($result2, MYSQL_NUM))
{
  $cadHijos .=''.$rowHijos[0].' ';
}

Es decir, le agrego un espacio tras cada hijo (incluido al ultimo).

Le paso a JavaScript esta funcion, de la forma:

Código PHP :

onClick="cargaContenidoRespuestas(\''.$cadHijos.'\')"

Recibo en la funcion de JavaScript de la forma:

Código Javascript :

function cargaContenidoRespuestas(idPost)
{
  var separaCadHijos = idPost.split(" ");
  var numHijos = separaCadHijos.length;
  var i;
  for(i=0;i<numHijos;i++)
  {
    var contenedorRespuesta=document.getElementById("contenedorRespuesta"+separaCadHijos[i]);
    var ajax=nuevoAjax();
  
    if(contenedorRespuesta.style.display == "") contenedorRespuesta.style.display = "none";
    else contenedorRespuesta.style.display = "";
  
    ajax.onreadystatechange=function()
    {
      if (ajax.readyState==4)
     {
       contenedorRespuesta.innerHTML = ajax.responseText;
     }
      else
        contenedorRespuesta.innerHTML = "<br>Cargando...<br><br>";
    }
    ajax.send(null);
  }
}

Recordando que cada fila hija se denominaba como "contenedorRespuestaID", siendo ID el id de cada hijo.

Pero al pulsar en el padre para que se despliegue, solo obtengo un hijo por cada padre, curiosamente el primero de la lista de $separaCadHijos, y no todos, que es lo deseable. ¿Alguien sabría decirme por qué? La función SPLIT está bien hecha ¿no?

¡Muchísimas gracias de antemano! Estoy aquí para lo que necesitéis!

Comentaos también que $rowHijos[0] hace referencia a la id de cada post, campo clave e único.

Saludos!

Ya CASI lo he conseguido, me falta algo que no llego a entender:
Como os dije, me mostraba un solo hijo por padre. Pues bien, he descubierto que se debe a que NO se puede llamar de la misma forma a la variable que muestra los hijos. En mi caso era:

Código Javascript :

var contenedorRespuesta=document.getElementById("contenedorRespuesta"+separaCadHijos[i]);

De esa forma superior solo me mostraba un hijo por cada padre.

Ahora bien, si hago:

Código Javascript :

var contenedorRespuesta=document.getElementById("contenedorRespuesta"+separaCadHijos[i]);
var contenedorRespuesta2=document.getElementById("contenedorRespuesta"+separaCadHijos[i+1]);

Me muestra dos hijos por cada padre! (en el caso de haberlos).

Pensando así, se me courre declarar contenedorRespuesta como array, y de longitud pasarle el numero de hijos, de la forma:

Código Javascript :

function cargaContenidoRespuestas(idPost)
{
  var separaCadHijos = idPost.split(" ");
  var numHijos = separaCadHijos.length;
  var i;
  var contenedorRespuesta = new Array(numHijos-1); 
  for(i=0;i<numHijos-1;i++)
  {
   var contenedorRespuesta[i]=document.getElementById("contenedorRespuesta"+separaCadHijos[i]);
   var ajax=nuevoAjax();
  
    if(contenedorRespuesta[i].style.display == "") contenedorRespuesta[i].style.display = "none";
    else contenedorRespuesta[i].style.display = "";
      
    ajax.onreadystatechange=function()
    {
      if (ajax.readyState==4)
     {
       contenedorRespuesta[i].innerHTML = ajax.responseText;
     }
      else
        contenedorRespuesta[i].innerHTML = "<br>Cargando...<br><br>";
    }
    ajax.send(null);
  }
}

Pero así no se ejecuta Ajax, es decir, no se me llega ni a abrir el PHP que contiene la función que llama Ajax.

¿No debería funcionar?

Gracias!!!!!

Ya me di cuenta! era porque habia puesto var de nuevo dentro del bucle for! sin embargo, me sigue mostrando un solo hijo por padre! excepto como os dije, si hago lo que puse en el anterior post!

¿Alguien sabe por qué?

Gracias!

Todo solucionado! la respuesta, para quien le interese, es que el objeto Ajax solo se debe enviar una vez, fuera del bucle for, y no por cada iteración, como yo hacía. Me di cuenta al comentar todo lo que había dentro del bucle for y hacer un alert. Me mostraba el alert las veces necesarias, pero si dejaba el código puesto solo me mostraba el alert una vez. Por lo que deduje que había alguna sentencia que se salía de la función. Y entonces entedí el send de Ajax.

¡Gracias por vuestro esfuerzo!

jejej excelente trabajo depurando , me alegro que hayas conseguido la solucion.