Bueno, espero ser lo mas claro posible.
Tengo una pagina Index en la cual tengo 3 divs, uno de ellos lo uso para montar un menu desplegable, en el cual al darle clic a una de las opciones me carga la pagina correspondiente a la opcion en un div que llamo contenidos.
aca publico el codigo de mi index.
Código:
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%--
Document : ModuloUsuario
Created on : 26/11/2008, 10:00:26 AM
Author : Wilson Esteban Velez Morales
--%>
<!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"lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Modulo Usuario</title>
<link href="css/mis_estilos.css" rel="stylesheet" type="text/css">
<link href="css/eyp.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/codigo.js"></script>
<script language="JavaScript" type="text/javascript" src="js/menu.js"></script>
<script language="JavaScript" type="text/javascript" src="js/interno.js"></script>
</head>
<body bgcolor="#EEFAFF">
<div id="contenedor" >
<div id="cabecera" align="center">
<table width="87%" height="16%" border="0" align="center">
<tr>
<td height="89"> <div align="right"><img src="logo.png" alt="" name="logo" width="38%" height="86%" border="0" align="texttop" id="logo" /></div></td>
</tr>
</table>
</div>
<div id="menu" aling="center">
<table width=100% height="593" border=0 cellpadding=0 cellspacing=0 dwcopytype="CopyTableRow">
<tr>
<td height="26" align=left valign=top> <div id=Board
onmouseover="MM_showHideLayers('Board','','show')"
style="Z-INDEX: 4; LEFT: 124px; VISIBILITY: hidden; WIDTH: 148px; POSITION: absolute; height: 108px; top: 85%;"
onmouseout="MM_showHideLayers('Board','','hide')">
<table cellspacing=0 cellpadding=1 width="100%"
bgcolor=#666666 border=0>
<tbody>
<tr>
<td> <table cellspacing=0 cellpadding=0 width="100%"
bgcolor=#ffffff border=0>
<tbody>
<tr>
<td align=middle width="15%"><font size="-1"><img height=25
alt=""
src="../Imagenes/Ima-Configuracion/Config.png"
width=25 /></font></td>
<td width="85%"><font size="-1"><a
href="javascript:llamarasincrono('ConsultarBoard.jsp', 'contenidos');">Consultar
Board</a></font></td>
</tr>
<tr>
<td align=middle width="15%"><font size="-1"><img height=25
alt=""
src="../Imagenes/Ima-Configuracion/Config.png"
width=25 /></font></td>
<td width="85%"><font size="-1"><a
href="javascript:llamarasincrono('CrearBoard.jsp', 'contenidos');">Crear
Board</a></font></td>
</tr>
<tr>
<td align=middle width="15%"><font size="-1"><img height=25
alt=""
src="../Imagenes/Ima-Configuracion/Config.png"
width=25 /></font></td>
<td width="85%"><font size="-1"><a
href="javascript:llamarasincrono('ModificarBoard.jsp', 'contenidos');">Modificar
Board</a></font></td>
</tr>
<tr>
<td align=middle width="15%"><font size="-1"><img height=25
alt=""
src="../Imagenes/Ima-Configuracion/Config.png"
width=25 /></font></td>
<td width="85%"><font size="-1"><a
href="javascript:llamarasincrono('BajaBoard.jsp', 'contenidos');">Dar
de Baja Board</a></font></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<font size="-1"><img
id=Image6
onmouseover="MM_swapImage('Image6','','../Imagenes/Ima-Configuracion/Reg_Conf-on.png',1);MM_showHideLayers('Board','','show')"
onmouseout="MM_swapImgRestore();MM_showHideLayers('Board','','hide')"
height=100% alt="Registrar Board"
src="../Imagenes/Ima-Configuracion/Reg_Conf.png"
width=89% border=0 name=Image51 /></font></td>
</tr>
<!--DWLayoutTable-->
<tbody>
</tbody>
</table>
</div>
<div id="contenidos"></div>
</div>
<div id="pie">
<table width="100%" border="0">
<tr>
<td width="56%" align="left">CENTROAGUAS S.A. E.S.P. CALIDAD DE AGUA CALIDAD
DE VIDA</td>
<td width="44%"><div ></div></td>
</tr>
</table>
</div>
</body>
</html>
Bueno aca publico solo una parte de mi codigo ya que en mi menu tengo mas de 20 opciones y unas 4 opciones se desplegan de cada una de ellas asi que es algo largo.
como pueden notar en mi codigo uso el js llamarasincrono para cargar las paginas en el div contenidos (el archivo al que llamo es a codigo) aca publico el codigo
Código:
function llamarasincrono(url, id_contenedor){
var pagina_requerida = false
if (window.XMLHttpRequest) {// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest()
} else if (window.ActiveXObject){ // pero si es IE
try {
pagina_requerida = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){ // en caso que sea una versi�n antigua
try{
pagina_requerida = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
pagina_requerida.onreadystatechange=function(){ // funci�n de respuesta
cargarpagina(pagina_requerida, id_contenedor)
}
pagina_requerida.open('GET', url, true) // asignamos los m�todos open y send
pagina_requerida.send(null)
}
// todo es correcto y ha llegado el momento de poner la informaci�n requerida
// en su sitio en la pagina xhtml
function cargarpagina(pagina_requerida, id_contenedor){
if (pagina_requerida.readyState == 4 && (pagina_requerida.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(id_contenedor).innerHTML=pagina_requerida.responseText
}
ahora bien dentro del div contenidos se puede cargar la pagina ModificarBoard.jsp
Y al enviar el formulario, o al querer usar una de las opciones. como es traer los datos de la Board desde la base de datos y que me cargue los datos de nuevo en el div lo hago por medio de una variacion del llamarasincrono que lo tengo en el archivo Interno.
aca publico el codigo