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:
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.<%@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>
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:
ahora bien dentro del div contenidos se puede cargar la pagina ModificarBoard.jspfunction 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
}
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
