Trouble with dynamically created dijit.Menu and leftClickToOpen

I'm having trouble dynamically creating a dijit.Menu that opens with a left mouse button click. I have been successful dynamically creating a dijit.Menu that opens with a right mouse button click. I have also been successful declarative creating a dijit.Menu that opens with a left mouse button click.

I've include with this post some HTML that duplicates what works and what doesn't. The behavior of the HTML is the same in IE 6, FF 2/3, and Chrome. Hopefully, it will be simple to get up and running. Once it's running try the following...

1. Click the button - a dijit.Menu that opens with a right mouse button click will be dynamically created.
2. Right click the line of text - the dynamically created dijit.Menu will appear
3. Click the button - a dijit.Menu that should open with a left mouse button click will be dynamically created.
4. Left click the line of text - nothing happens <- help me with this please!
5. Left click the line of text- the declared dijit.Menu will appear

What am I doing wrong?

<head>
<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.Menu");
</script>

<script language="Javascript" type="text/javascript">
function createRightClickMenu()
{
leftClickMenu = new dijit.Menu({targetNodeIds:["dynamicRightClickMenuNode"]});
leftClickMenu.addChild(new dijit.MenuItem({label:"Dynamic Right Click Menu Item"}));

leftClickMenu.leftClickToOpen=false;
leftClickMenu.startup();
}

function createLeftClickMenu()
{
leftClickMenu = new dijit.Menu({targetNodeIds:["dynamicLeftClickMenuNode"]});
leftClickMenu.addChild(new dijit.MenuItem({label:"Dynamic Left Click Menu Item"}));

leftClickMenu.leftClickToOpen=true;
leftClickMenu.startup();
}
</script>
</head>
<body class="tundra">

1. <button onclick="createRightClickMenu();">Dynamically Create Right Click Menu</button>

<div id="dynamicRightClickMenuNode">
2. Right Click Me To See Dynamically Created Right Click Menu (I work)
</div>

3. <button onclick="createLeftClickMenu();">Dynamically Create Left Click Menu</button>

<div id="dynamicLeftClickMenuNode">
4. Left Click Me To See Dynamically Created Left Click Menu (I don't work)
</div>

<div dojoType="dijit.Menu" leftClickToOpen="true" targetNodeIds="declaredLeftClickMenuNode" style="display: none;">
<div dojoType="dijit.MenuItem">Declared Left Click Menu Item</div>
</div>

<div id="declaredLeftClickMenuNode">
5. Left Click Me To See Declared Left Click Menu (I work)
</div>

</body>

You need to specify

Submitted by Helmchen on Thu, 10/09/2008 - 20:50.

You need to specify leftClickToOpen: true when calling the constructor, like:

leftClickMenu = new dijit.Menu({leftClickToOpen: true, targetNodeIds:["dynamicLeftClickMenuNode"]});

Thank you

Submitted by bobfuller30004 on Thu, 10/09/2008 - 21:10.

Thanks! I'm glad that my trouble was because of trivial syntax issue.

Search