CODEWITHSUNDEEP
javascriptdojo
user3149051
user3149051

Reputation: 1

Dojo event is not working due to parser

my code snippet 

<div id="mainMenu" data-dojo-type="dijit/MenuBar">
            <div id="edit" data-dojo-type="dijit/MenuBarItem">Add Hero</div>
            <div id="view" data-dojo-type="dijit/MenuBarItem">Grid View</div>
            <div id="task" data-dojo-type="dijit/MenuBarItem">Detailed View</div>
        </div>
    <script >
        var dojoConfig = {
            async: 1,
            parseOnLoad: 0
        };      
    </script>
    <script>
    require([
                   "dojo/dom",
                    "dojo",
                    "dojo/parser",
                    "dojo/query",
                    "dojo/on",
                    "dijit/Menu",
                    "dojo/domReady!"
                ], function(dom,dojo ,parser, query,on){

                    //var result = query("#edit");
                    var myButton=dojo.byId("edit");console.log(myButton);
                    on(myButton, "click", function(){
                        alert("Cliked on menu item");
                    });

                });
    </script>

My goal is to display the menu name on click. But the problem with this is that the parser events will not be triggered. If I change parseOnLoad to 0 or flase, then I will get the alert message but menu getting disturbed and if I set the parseOnLoad to 1 then click event is not work?

Upvotes: 0

Views: 347

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44685

While your code might be working for DOM nodes, it doesn't work for widgets (dijits). This is also the reason why it works when you disable the parseOnLoad feature, because you never parsed the DOM nodes to widgets. This means your DOM events will work, but of course, the menu is never created as a widget, so you have problems with your menu.

Now, to solve this problem, you need to use the dijit/registry to retrieve the menu item:

var myButton = registry.byId("edit");

The dojo/on module is only for DOM events, so you will have to replace that as well. Luckily for us, the widget object (that's what you retrieve by using the registry), already has an on() function (see API docs), which we can use like this:

myButton.on("click", function() {
    alert("Cliked on menu item");
});

The last thing we need to change is the initial DOM loaded event (dojo/domReady!). Widgets are parsed after the DOM is loaded. Which means that if we listen to a DOM-ready event, we will not be able to retrieve the widgets. The event handler for checking whether the DOM is loaded and the widgets are parsed, is by using the dojo/ready module. It has a slightly different syntax than the dojo/domReady! plugin, because we use it like this:

ready(function() {
    // Your code
});

Or in your case:

ready(function() {
    var myButton = registry.byId("edit");
    console.log(myButton);

    myButton.on("click", function() {
        alert("Clicked on menu item"); 
    });
});

The complete example can also be found at JSFiddle.

Upvotes: 1

Related Questions