Get the ID of a div from a context menu

This site is best viewed in a modern browser with JavaScript enabled.

Get the ID of a div from a context menu

znero

Hello,

I'd like to use a context menu which triggers an inline-WYSIWYG editor for a specific div.
http://www.webdeveloper.com/forum/images/editor/insertorderedlist.gif
This means I right-click on the div, a context menu appears and when I hit "edit", the editor triggers for that div.

The problem is that I need the ID of that div. If I use a context menu and say

onclick="toggleArea(this.id)"

then the "this.id" part wont be the ID of the div.

Do you know how I can get the right ID?

Kor

znero;1048403 wrote:
If I use a context menu and say
onclick="toggleArea(this.id)"
then the "this.id" part wont be the ID of the div.

Really? How's that? Can we see the extended part of your code?

znero

This is the menu:

<ul id="CM1" class="SimpleContextMenu">
  <li onclick="toggleArea(this.id);">Edit</li>
  <li>Item 2</a></li>
  <li>Item 3</a></li>
  <li>Close Menu</a></li>
</ul>

So the ID would be taken from the menu instead of from the <div> the menu belongs to.

The plan is to call this function (for the "nicEditor"):

function toggleArea(givenId) {
  alert("Given ID is:" + givenId);
  if(!area1) {
  area1 = new nicEditor({fullPanel : true, onSave : function(content, id, instance) {saveChangedContent(content, id, instance)} }).panelInstance(givenId,{hasPanel : true});
} else {
  area1.removeInstance(givenId);
  area1 = null;
  }
}

Kor

<[COLOR="Red"]li[/COLOR] onclick="toggleArea([COLOR="Red"]this[/COLOR].id);">Edit</li>

the keyword this will return the reference of the object whose function/method is applied on. The above example: the reference of the LI element, obviously, not of the UL element (the parent node) as it looks like you need.

Try:

<[COLOR="Blue"]ul [/COLOR][COLOR="Green"]id="CM1"[/COLOR] class="SimpleContextMenu">
<li onclick="toggleArea(this.[B][COLOR="Blue"]parentNode[/COLOR][/B].[COLOR="Green"]id[/COLOR]);">Edit</li>
...
</ul>

znero

Well, actually I need the id of the <div> the context menu is attached to. So the one the mouse pointer was pointing in before the user right-clicked.

The problem is I cant check the position of the mouse pointer either, because it's obviously pointing on the menu item, not the <div> beneath it.

Kor

znero;1048440 wrote:
Well, actually I need the id of the <div> the context menu is attached to. So the one the mouse pointer was pointing in before the user right-clicked.

The problem is I cant check the position of the mouse pointer either, because it's obviously pointing on the menu item, not the <div> beneath it.

No very clear. You need the container DIV's id? Post the HTML code with that DIV included.

znero

The <div>s are dynamically created using spry framework:

<div class = "container" spry:region="pv1" spry:repeatchildren="pv1" >
        <div id="{pv1::order/@nr}">        

        <!-- content -->
        </div>
</div>

So the div is a number from 1 to x.

The context menu is attached to the class "container":

        <script type="text/javascript">
            SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
            SimpleContextMenu.attach('container', 'CM1');
        </script>

I can't say in advance how many divs there will be because the whole website is created dynamically, that's why I need to find a way to read the right <div> when using the context menu there.

Kor

No Sir, you have not understood me. How many parents are between your LI element (where you have the onclick event) and the container DIV? Please, post the whole DOM structure, starting from that DIV to that LI element. It is important to see all the branches of that tree.

znero

<body class="twoColHybRtHdr">
	<!-- The context menu-->
	<ul id="CM1" class="SimpleContextMenu">
		<li onclick="toggleArea(this.parentNode.id);">Edit</li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Close Menu</a></li>
	</ul>
    <!-- End of context menu -->

<!-- Start of "container" div -->
<div id="container">

<!-- Start main content area -->
<div id="mainContent">
	<!-- Start First Column -->
	<div id="firstColumn">      

  	<!-- Start spry repeat region -->
  	<div class = "container" spry:region="pv1" spry:repeatchildren="pv1" >

    <!-- Start text and picture div -->
    <div id="{pv1::order/@nr}">        
    </div>
    <!--End text and picture div -->

    </div>
    <!-- End spry repeat region -->

  </div>
  <!-- End of first Column -->

<!-- Start of second column -->
<div id="secondColumn">
	<!-- Start spry repeating region -->
  <div class = "container" spry:region="pv1" spry:repeatchildren="pv1" >

  <!-- Start text and picture div -->
  <div id="{pv1::order/@nr}">
  </div>
  <!-- End text and picture div -->
  </div>
  <!-- end spry repeating section -->
</div>
<!-- End of second column -->
</div>
<!-- End of main content area -->

</div>
<!-- End of "container" div -->
</body>

Kor

Bon. Now, which is the DIV you need to refere? The one with the id="mainContent", or... which one?

By the way, have you understood DOM?
http://en.wikipedia.org/wiki/Document_Object_Model

znero

It's the <div id="{pv1::order/@nr}">

And sorry, didn't have any DOM-inspector at hand.