Se trata de lo siguiente. Bajé el código de uno de esos menús desplegable que abundan por la red. Lo implementé en mi proyecto sin ningún problema. Luego, cree varios menús con distintas opciones. La idea es que el usuario pueda seleccionar el menú que necesite según lo que vaya a hacer. Para ver que funciona implemente las opciones de cambio de menú para que recargue la página entera con el nuevo menú. Hasta aquí no hay ningún problema.
Sin embargo estoy buscando que NO recargue la página al momento de cambiar el menú. Y se que esto se puede hacer con Ajax. Dado que el código del menú es un poco más avanzado que mis conocimientos en javascript, para ubicar el ID del DIV del menú utilice la extensión Web Developer 1.1.9 de Firefox. y al ubicarme sobre el menú apareció esto:
div #DOMenuBar1 .jsdomenubardiv
Haciendo pruebas de descarte encontré que el ID era DOMenuBar1 y efectivamente, el cambio se realizaba. Pero con un problema: no aparece nada al cambiar.
El diseño lo tengo implementado así:
main.asp
Cita:
La variable varControl no tiene ninguna importancia en el problema (totalmente seguro). La variable varTipoMenu contiene el nombre del archivo de configuración del menú.<html>
<head>
<title></title>
<link href="setup/css/main.css?<%= varControl %>" rel="stylesheet" type="text/css">
<link href="setup/menu/jsdomenu.css?<%= varControl %>" rel="stylesheet" type="text/css">
<script language="JavaScript" src="setup/menu/jsdomenu.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/jsdomenubar.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/<%= varTipoMenu %>?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/ajax/ajaxMenu.js?<%= varControl %>" type="text/javascript"></script>
</head>
<body onLoad="initjsDOMenu();"></body>
<head>
<title></title>
<link href="setup/css/main.css?<%= varControl %>" rel="stylesheet" type="text/css">
<link href="setup/menu/jsdomenu.css?<%= varControl %>" rel="stylesheet" type="text/css">
<script language="JavaScript" src="setup/menu/jsdomenu.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/jsdomenubar.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/<%= varTipoMenu %>?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/ajax/ajaxMenu.js?<%= varControl %>" type="text/javascript"></script>
</head>
<body onLoad="initjsDOMenu();"></body>
ajaxMenu.js
Cita:
function nuevoAjax()
{
var xmlhttp=false;
try
{xmlhttp = new XMLHTTPRequest();}
catch(err1)
{
try
{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch (err2)
{
try
{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (err3)
{xmlhttp = false;}
}
}
return xmlhttp;
}
var xmlHttp
function cargarMenu(modo)
{
var miAleatorio = parseInt(Math.random()*9999999999999999999);
var DOMenuBar1;DOMenuBar1 = document.getElementById('DOMenuBar1');
ajax=nuevoAjax();ajax.open("GET", "contenedor.asp?modo="+modo+"&"+miAleatorio,tr ue);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if (ajax.status==200)
{
DOMenuBar1.innerHTML = ajax.responseText
}
}
}
ajax.send(null)
setTimeout("cargarContenido("+n+")",1000);
}
{
var xmlhttp=false;
try
{xmlhttp = new XMLHTTPRequest();}
catch(err1)
{
try
{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch (err2)
{
try
{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (err3)
{xmlhttp = false;}
}
}
return xmlhttp;
}
var xmlHttp
function cargarMenu(modo)
{
var miAleatorio = parseInt(Math.random()*9999999999999999999);
var DOMenuBar1;DOMenuBar1 = document.getElementById('DOMenuBar1');
ajax=nuevoAjax();ajax.open("GET", "contenedor.asp?modo="+modo+"&"+miAleatorio,tr ue);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if (ajax.status==200)
{
DOMenuBar1.innerHTML = ajax.responseText
}
}
}
ajax.send(null)
setTimeout("cargarContenido("+n+")",1000);
}
Como ven es una rutina básica y simple en Ajax que llama a la página contenedor.asp que hace lo siguiente:
contenedor.asp
Cita:
Hay una rutina para que con la variable modo se puede seleccionar el archivo de menú correspondiente. Y es más, probé poner uno directo así:<html>
<head>
<title></title>
<link href="setup/menu/jsdomenu.css?<%= varControl %>" rel="stylesheet" type="text/css">
<script language="JavaScript" src="setup/menu/jsdomenu.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/jsdomenubar.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/menuprincipal.inc.asp?<%= varControl %>" type="text/javascript"></script>
</head>
<body onLoad="initjsDOMenu();"></body>
</html>
<head>
<title></title>
<link href="setup/menu/jsdomenu.css?<%= varControl %>" rel="stylesheet" type="text/css">
<script language="JavaScript" src="setup/menu/jsdomenu.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/jsdomenubar.js?<%= varControl %>" type="text/javascript"></script>
<script language="JavaScript" src="setup/menu/menuprincipal.inc.asp?<%= varControl %>" type="text/javascript"></script>
</head>
<body onLoad="initjsDOMenu();"></body>
</html>
Cita:
y nada, no muestra nada de nada. También probe sólo poner la línea que carga el menú y evitar cargar nuevamente el CSS y los otros JS del menú pues ya están cargados en la página main.asp<html>
<head>
<title></title>
<script language="JavaScript" src="setup/menu/menu01.inc.asp?<%= varControl %>" type="text/javascript"></script>
</head>
<body onLoad="initjsDOMenu();"></body>
</html>
<head>
<title></title>
<script language="JavaScript" src="setup/menu/menu01.inc.asp?<%= varControl %>" type="text/javascript"></script>
</head>
<body onLoad="initjsDOMenu();"></body>
</html>
Para invocar el cambio de menú, hay una opción en todos los menús que llaman a la función cargarMenu() que esta en el archivo ajaxMenu.js.
Lo que pasa es que si carga el contenido del archivo contenedor.asp pero sin mostrar nada. ¿Cómo se que carga el archivo?. Porque agregue una palabra cualquiera al final mismo del archivo y eso es lo único que se muestra. Además agregué una línea en ASP para que muestre el valor de la variable modo, así:
Cita:
y el valor pasa sin ningún problema.<%= Request("modo")%>
En resumen, he logrado hacer que se cargue un archivo en el DIV correspondiente al menú, pero no logro que se cargue el contenido de los nuevos menúes. Estoy seguro que es una cosa de nada pero no logro ver que puede ser.
Agradezco mucho el apoyo brindado.
Un saludo desde Lima, Perú.
