Problema al ejecutar AJAX dentro de otro AJAX

[marx-pola]

Hola a todos! El tema es el siguiente. Tengo una página principal con un menu lateral con links. Estos links, por medio de AJAX, al presionar en cada uno de ellos, llama a otras páginas y me las muestra en el centro sin resetear la página principal y las mismas contienen solapas con diferente información.

El problema está en esas páginas con las solapas que aparecen. Al seleccionar alguna solapa, me muestra su contenido pero la solapa no queda marcada como ACTIVA.

El ejemplo para que lo vean funcionando está aquí: SOLAPAS CON AJAX

Vamos por partes... en la página principal, utilizo este script para llamar a las páginas que contienen las solapas. En este caso selecciono el link CUBARTE y me muestra la página cubarte.php con el contenido y sus solapas:

Código:

<script>
<!--
//inicializamos la libreria
var myConn = new XHConn();

//si no existe da error
if (!myConn) alert("XMLHTTP no disponible. Intenta un mejor browser.");

//funcion que se llama luego del include
var include_terminado = function (oXML) { document.getElementById('contenido').innerHTML = oXML.responseText; };

//funcion que hace el include
function include_dinamico (url)
{
//AJAX, llamo a la pagina y le mando los parametros
p=url
myConn.connect(p, "GET", "variable="+url, include_terminado);
}

</script>

<a href="javascript:;" onClick="include_dinamico('cubarte.php');">CUBARTE</a>
<div id="contenido"></div>

Dentro aparece otra página con solapas y el código de la misma es el siguiente:

Código css que ejecuta la función ajax:

Código HTML:

<style type="text/css" media="screen">
/* DIVS DE LAS SOLAPAS */

/* div exterior contenedor del menu */
.indentmenu{
font: bold 13px Arial;
width: 626px; /*leave this value as is in most cases*/
overflow: hidden;
}

/* divs de los menues de las solapas */
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 630px; /*width of menu*/
border: 1px; /*dark purple border*/
border-width: 1px 0;
background: #C38A87;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #ffffff; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: #9C2F29;
}

/* div del contenido de las solapas */

#divcontenidos {
	display: inline;
    margin:0px;
	float: left;
	padding:23px;
    padding-top:0px;   
	width:580px;
}

</style> 

Código AJAX que ejecuta el cambio de las solapas y que debería activar y desactivar la solapa seleccionada:

Código:

<script type="text/javascript">

var cajasmicroinf = new Array(
				'quienes somos',
				'mision',
				'vision',
				'pensamiento',
				'reglamento',
				'encuesta');
		var microinf = new Solapas(cajasmicroinf,'Inf');


function Solapas(cuales,activo){
	var cajas = cuales;
	var estilo = activo;
	var div = null;
	this.solapas = solapas;

function solapas(cual){
		//div = 'aj' + cual;
		for (i=0;i<cajas.length;i++){
			var divcual = document.getElementById('li' + cajas[i]);
			var divmayor = document.getElementById(cajas[i]);
			if(cajas[i] == cual){
				divmayor.style.display = 'block';
			} else{
				divmayor.style.display = 'none';
			}
		}
	}

}

function aggEvento(){
	var links = document.getElementById('indentmenu').getElementsByTagName('a');
		for(i=0; links[i]; i++){
			links[i].onclick = function(){
				var links = document.getElementById('indentmenu').getElementsByTagName('a');
				for(j=0; links[j]; j++){
					links[j].className = '';
				}
				this.className = 'current';
			}
		}
	}
</script>

Y las solapas son estas y las llamo de esta manera:

Código HTML:

 <div class="indentmenu" id="indentmenu">
      <ul>
        <li><a id="liquienes" href="javascript:microinf.solapas('quienes somos');" class="current">quienes somos</a></li>
        <li><a id="limision" href="javascript:microinf.solapas('mision');" class="">misión</a></li>
        <li><a id="livision" href="javascript:microinf.solapas('vision');" class="">visión</a></li>
.........
      </ul>
    </div> 

Probé de pasar todo el script abajo de todo antes del </body> y tampoco funcionó (sugerencia de un colega).

Como les decía antes, lo único que me faltaría es que la solapa que selecciono quede ACTIVA.

Espero puedan ayudarme y desde ya muchas gracias.

Saludos. MArx.

[ClubIce]

no creoque te haya entendido bien pero mira esta pagina http://clubice.site50.net/conexiones

yo la hize, (no esta completa por que el duño la abandono)

utilise un Scipt "primitivo" para cargar el conenido. chekealo y mira como funcion, haber si te sirve

[marx-pola]

Gracias amigo, pero en esa página no me aparece nada. Espero alguien pueda darme una mano.

[ClubIce]

no me referia a que miraras el codigo fuente y los scripts

[marx-pola]

Nop amigo... no es lo que necesito. La duda que tengo la sigo planteando así...

¿Por qué al ejecutar esta página sola, las solapas que selecciono quedan presionadas o ACTIVADAS?
PAGINA SIMPLE CON SOLAPAS QUE FUNCIONAN

¿Y si a ESA MISMA PAGINA la llamo desde OTRA CON AJAX, las solapas NO quedan marcadas cuando las selecciono?
PAGINA PRINCIPAL QUE MEDIANTE AJAX LLAMA A OTRA PAGINA

Eso mismo... ¿por qué no funciona :(?

[marx-pola]

Ajax dentro de Ajax no funciona, no?

[jackson666]

Claro, el problema es el siguiente: el codigo javascript traido con AJAX no es interpretado asi nomas. Hay que "parsearlo"....

Pero para que te vas a meter en eso, si los efectos que vos queres que ese menu tenga se los podes dar con CSS!

Hace el menu que ahora "no anda" completamente en CSS y vas a ver como todo funciona

Si queres para que no te la compliques te dejo este link

http://www.cssmenumaker.com/

[marx-pola]

mmmmm... probé la página que me has pasado y esta buena, pero dentro del CSS no logro encontrar la manera de que quede ACTIVA la pestaña presionada.

Por eso preguntaba por lo otro hecho con AJAX ya que de esa manera funcionó, pero si hay otra forma de hacerlo sin que dé tantos dolores de cabeza, lo haría.

Gracias nuevamente.