DHTML menu w/Prototype
2006/07/06 00:11
Viewed 9890 times
Replies: 0/0

Hi,

I'm using the DHTML Menu with the Prototype library. I'm loading the content of the menu through an AJAX request. When I view the generated source (using the Web Developer Toolbar) in Firefox I see the menu content but the menu isn't being rendered. I see the following error in the javascript console:

  • -----------------------------------------------------
  • Error: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLBodyElement.insertBefore]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: file:///C:/Documents%20and%20Settings/xcos923/Desktop/v2/v2/hmenu-2.9/src/hmenu.js :: DynarchMenu :: line 16" data: no]Source File: file:///C:/Documents%20and%20Settings/xcos923/Desktop/v2/v2/hmenu-2.9/src/hmenu.jsLine: 16
  • -----------------------------------------------------

Here's the javascript wrapper for the menu:

  • -----------------------------------------------------
  • Event.observe(window, 'load', menu, false);

function menu () {

// If the menu div has no contents, use the global menu
if (!document.getElementById('menu').innerHTML) {
new Ajax.Updater('menu', 'menu.html', {asynchronous: true});
}

// Include application and application suite menu if requested
if (document.getElementById('menu').getAttribute('applications') == 1) {
new Ajax.Request('applications.html', {asynchronous: true, onSuccess: applicationsMenu, onFailure: menuError});
}

if (document.getElementById('menu').getAttribute('suite') == 1) {
new Ajax.Request('suite.html', {asynchronous: true, onSuccess: suiteMenu, onFailure: menuError});
}

// 'Draw' the menu
DynarchMenu.setup('menu', {electric: true});
}

var applicationsMenu = function(r) {
new Insertion.Top('menu', r.responseText);
}

var suiteMenu = function(r) {
new Insertion.Bottom('menu', r.responseText);
}

var menuError = function(r) {
alert(r.statusText);
}
-----------------------------------------------------

Here's the HTML source:

  • ----------------------------------------------------

<html>
<head>
<title>UP: Application Template</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<script src="../scriptaculous-js-1.6.1/lib/prototype.js" type="text/javascript"></script>
<script src="../common.js" type="text/javascript"></script>

<script src="../hmenu-2.9/src/hmenu.js" type="text/javascript"></script>
<script src="../menu/menu.js" type="text/javascript"></script>
<link href="../hmenu-2.9/src/skin-xp-apps.css" type="text/css" rel="stylesheet" />
</head>
<body>

<ul id="menu" applications="1" suite="1"></ul>

</body>
</html>

Thank you,
Jeff

Google