Search code examples
menudojomenuitemmenubar

Dijit Menu (bar) with link

I am using Dijit Menu bar with declartive markup.

The Menu items contains links ('a'):

<li dojoType="dijit.MenuItem" id="i_car_new">
   <a href="/RooTest/cars?form">Create new Car</a>
</li>

The menu is rendered correct, and even the link is display as link, but when one click on this link in the menu, noting happens. (My actual workaround is to add an 'onClick' event with an 'window.location'.)

But I would expect that the links work like normal (user click, browswer request new page). So is my expectance wrong? And what must I change, that the links work?

relevant parts from the html.file

<html>
<head>
...
<script type="text/javascript">var djConfig = {parseOnLoad: true, isDebug: false};</script>
<script type="text/javascript" src="/RooTest/resources/dojo/dojo.js"></script>
<script type="text/javascript" src="/RooTest/resources/spring/Spring.js"></script>
<script type="text/javascript" src="/RooTest/resources/spring/Spring-Dojo.js"></script>
<script type="text/javascript" language="JavaScript">dojo.require("dojo.parser");</script>
</head>
<body class="tundra spring">
    <div version="2.0" id="menu" dojoType="dijit.MenuBar">
    <script type="text/javascript">
            dojo.require("dijit.MenuBar");
            dojo.require("dijit.PopupMenuBarItem");
            dojo.require("dijit.Menu");
            dojo.require("dijit.MenuItem");
            dojo.require("dijit.PopupMenuItem");
     </script>

     <ul id="_menu">
        <li dojoType="dijit.PopupMenuBarItem" id="c_car">
            <h2>Car</h2>
            <ul dojoType="dijit.Menu">
                <li dojoType="dijit.MenuItem" id="i_car_new">
                   <a href="/RooTest/cars?form">Create new Car</a>
                </li>
                <li dojoType="dijit.MenuItem" id="i_car_list"
                    <a href="/RooTest/cars">List all Cars</a>
                </li>
            </ul>
        </li>
     </ul>
</div>
<div id="main">...</div></body></html>
Solution

  • The reason you don't navigate away from the page when you click is because the MenuItem calls dojo.stopEvent when you click it - see _onClick() at http://trac.dojotoolkit.org/browser/dojo/tags/release-1.6.1/dijit/MenuItem.js#L92

    If you want to do this a lot I'd be tempted to extend the MenuItem with something like (old syntax, I've not moved over to the new AMD way of doing things yet, and untested):

    dojo.provide('dijit.anchorMenuItem');
dojo.require('dijit.MenuItem');

dojo.declare('dijit.anchorMenuItem', dijit.MenuItem, {
    _onClick: function(evt) {
        this.getParent().onItemClick(this, evt);
    }
});

    And then use this in place of the default MenuItem when you want a simple link. Otherwise, do as your saying and add a call to window.location on the onClick handler, but I think this is neater personally.