www.webdeveloper.com
Results 1 to 11 of 11

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

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    7

    Get the ID of a div from a context menu

    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?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by znero View Post
    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?

  3. #3
    Join Date
    Nov 2009
    Posts
    7
    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;
      }
    }

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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>
    Last edited by Kor; 11-16-2009 at 09:01 AM.

  5. #5
    Join Date
    Nov 2009
    Posts
    7
    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.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by znero View Post
    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.

  7. #7
    Join Date
    Nov 2009
    Posts
    7
    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.
    Last edited by znero; 11-16-2009 at 10:05 AM. Reason: made it more clear

  8. #8
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  9. #9
    Join Date
    Nov 2009
    Posts
    7
    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>

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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

  11. #11
    Join Date
    Nov 2009
    Posts
    7
    It's the <div id="{pv1::order/@nr}">

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles