Get the ID of a div from a context menu

**znero** · 11-16-2009 04:48 AM

Hello,

I'd like to use a context menu which triggers an inline-WYSIWYG editor for a specific div.
http://www.webdeveloper.com/forum/im...rderedlist.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

Code:

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** · 11-16-2009 05:14 AM

Originally Posted by znero

If I use a context menu and say

Code:

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** · 11-16-2009 05:27 AM

This is the menu:

HTML Code:

<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"):

Code:

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** · 11-16-2009 07:56 AM

Code:

<li onclick="toggleArea(this.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:

Code:

<ul id="CM1" class="SimpleContextMenu">
<li onclick="toggleArea(this.parentNode.id);">Edit</li>
...
</ul>

**znero** · 11-16-2009 08:33 AM

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** · 11-16-2009 08:54 AM

Originally Posted by 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.

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

**znero** · 11-16-2009 09:02 AM

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

HTML Code:

<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":

Code:

        <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** · 11-16-2009 09:08 AM

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** · 11-16-2009 09:19 AM

HTML Code:

<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** · 11-16-2009 09:27 AM

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** · 11-16-2009 10:04 AM

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

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

Thread: Get the ID of a div from a context menu

Thread Tools

Display

Get the ID of a div from a context menu

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions