CODEWITHSUNDEEP
xpagesdojomenuitem
AndrewG10i
AndrewG10i

Reputation: 681

Dijit.MenuItem and <a href=></a> link

My question is similar to that one: Dijit Menu (bar) with link

I'm using Dijit Menu as in following listing:

<div data-dojo-type="dijit/Menu">
    <div id="menuItem" data-dojo-type="dijit/MenuItem">
        <a href="http://url.com">urlLink</a>
    </div>
</div>

But link is not working as it blocked by dojo.stopEvent in _onClick().

The question is:
How to remove dojo.stopEvent and make link inside <div id="menuItem" data-dojo-type="dijit/MenuItem"> work properly?

The issue:
I need to put inside <div id=menuItem"> some code, which has to receive onClick event.

P.S. Originally this is XPages code.

Upvotes: 0

Views: 1605

Answers (2)

Serge Ballesta
Serge Ballesta

Reputation: 148910

Well I fell in same problem, saw this post and the related other, but wasn't satisfied with the "onclick" solution :

  • it didn't work (for me) with keyboard navigation
  • it imposes to a add script element (onclick=...) in the declarative zone which is not what I expect for unobtrusive JavaScript

Finaly I digged further in dojo and decided to directly use the href attribute of first sub-node in the handler. My script section (derived from dijit menus tutorial) is then :

<script>
    require([
        "dojo/dom",
    "dojo/parser",
    "dojo/dom-attr",
    "dojo/query",
        "dijit/registry",
        "dijit/WidgetSet", // for registry.byClass
        "dijit/Menu",
        "dijit/MenuItem", 
        "dijit/MenuBar",
        "dijit/MenuBarItem", 
        "dijit/PopupMenuBarItem",
        "dojo/domReady!"
    ], function(dom, parser, domattr, query, registry){
        // a menu item selection handler
        var onItemSelect = function(event){
            dom.byId("lastSelected").innerHTML = this.get("label");
            var achild = query("a", this.domNode)[0];
            if (achild != null) {
                var href = domattr.get(achild, "href");
                if ((href != null) && (href != '') && (href != '#')) {
                    window.location.href = href;
                }
            }
        };

        parser.parse();

        var setClickHandler = function(item){
            item.on("click", onItemSelect);
        };

        registry.byClass("dijit.MenuItem").forEach(setClickHandler);
        registry.byClass("dijit.MenuBarItem").forEach(setClickHandler);
    });
</script>

That way I don't have to change anything in a menu of type

<ul><li><a href="...">...</a></li></ul>

that works with JavaScript disabled, and links work fine with mouse and keyboard navigation when JavaScript is enabled. Simply don't forget the "class='claro'" in body element ....

Upvotes: 1

Lucian Depold
Lucian Depold

Reputation: 2019

What about this:

<div data-dojo-type="dijit/Menu">
    <div id="menuItem" data-dojo-type="dijit/MenuItem" 
          onclick="window.location('http://url.com')">
        <a href="http://url.com">urlLink</a>
    </div>
</div>

Working jsfiddle:

http://jsfiddle.net/KuyYX/

Upvotes: 0

Related Questions