Get the ID of a div from a context menu

@zneroNov 16.2009

Hello,

I’d like to use a context menu which triggers an inline-WYSIWYG editor for a specific div.
~~[url]~~http://www.webdeveloper.com/forum/images/editor/insertorderedlist.gif[/url]
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)”[/CODE]

then the “this.id” part wont be the ID of the div.

Do you know how I can get the right ID?

to post a comment

JavaScript

10 Comments(s) _↴

@KorNov 16.2009 — # If I use a context menu and say [CODE]onclick="toggleArea(this.id)"[/CODE] then the "this.id" part wont be the ID of the div.[/QUOTE]
Really? How's that? Can we see the extended part of your code?

@zneroauthorNov 16.2009 — #This is the menu:

[code=html]
 <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>
 [/code]

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;
 }
 }[/CODE]

@KorNov 16.2009 — #

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

the keyword [B]this[/B] 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:

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

@zneroauthorNov 16.2009 — #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.

@KorNov 16.2009 — #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.[/QUOTE]
No very clear. You need the container DIV's id? Post the HTML code with [I]that DIV[/I] included.

@zneroauthorNov 16.2009 — #The <div>s are dynamically created using spry framework:

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

 <!-- content -->
 </div>
 </div>
 [/code]

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>
 [/CODE]

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.

@KorNov 16.2009 — #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 [I]whole DOM structure[/I], starting from that DIV to that LI element. It is important to see all the branches of that tree.

@zneroauthorNov 16.2009 — #

[code=html]<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>[/code]

@KorNov 16.2009 — #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

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

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

Also in #JavaScript _↴

Shameless plug for node.js framework setAttribute in IE6+PNG Fix for old IE breaking Form!

Success!

Help @znero spread the word by sharing this article on Twitter...

Tweet This

Get the ID of a div from a context menu

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Get the ID of a div from a context menu

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴