Context menu - InvokedOn text not getting cloned

Question

This is my fiddle - http://jsfiddle.net/X9tgY/1526/

This code of line is not working

$(selectedText).clone().insertAfter(selectedText);

you can test by right clicking on the html text, i am getting the html of invokedOn text but i am unable to clone it.

(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;
                
                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();
                
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                    });
                
                return false;
            });

            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
                        
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) 
                position -= menu;
            
            return position;
        }    

    };
})(jQuery, window);




$("#container").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
  
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
   var itsId = $(invokedOn).attr('id');
   var selectedText = $(invokedOn).get(0).outerHTML;
   var parentDiv = $(invokedOn).parent();
        alert(selectedText);
  if (selectedMenu = "Clone"){
   alert("inside");
   $(selectedText).clone().insertAfter(selectedText);
  }
    }
});

@import url(http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="container">
<div id="content">content</div>
    <div id="content2">
 <p>This is p </p>
 <h3> This is h3 </h3>
 </div>
    <button id="button">show it</button>
</div>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Clone</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/18666601/1366033'>Use Bootstrap 3 dropdown menu as context menu</a><br/>
<div>

Please open my fiddle link, it works perfectly there, unable to figure out why its showing an error here — user2828442, Apr 03 '17 at 20:38
The snippet was not working because you were loading the bootstrap script before the jquery. (*fixed it for you*) — Gabriele Petrioli, Apr 03 '17 at 20:42

score 0 · Accepted Answer · answered Apr 03 '17 at 20:38

First of all selectedMenu = "Clone" is not comparing anything. It is assigning the word Clone to the selectedMenu variable.

You should use == and since selectedMenu is a jQuery object you should check agains its text. so

 if (selectedMenu.text() == "Clone")

Now, selectedText also hold the HTML string extracted with $(invokedOn).get(0).outerHTML

So you most likely want to clone that element and insert it after itself.

$(invokedOn).clone().insertAfter(invokedOn);

(so you actually do not need to extract the html at all)

(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;
                
                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();
                
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                    });
                
                return false;
            });

            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
                        
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) 
                position -= menu;
            
            return position;
        }    

    };
})(jQuery, window);




$("#container").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
  
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
   var itsId = $(invokedOn).attr('id');
   var selectedText = $(invokedOn).get(0).outerHTML;
   var parentDiv = $(invokedOn).parent();
        alert(selectedText);
  if (selectedMenu.text() == "Clone"){
   alert("inside");
   $(invokedOn).clone().insertAfter(invokedOn);
  }
    }
});

@import url(http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="container">
<div id="content">content</div>
    <div id="content2">
 <p>This is p </p>
 <h3> This is h3 </h3>
 </div>
    <button id="button">show it</button>
</div>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Clone</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/18666601/1366033'>Use Bootstrap 3 dropdown menu as context menu</a><br/>
<div>

Fixed demo at http://jsfiddle.net/X9tgY/1527/

Thanks its working as needed but 1 issue, I tried to clone similar html elements with a click, depending on my area of click it used to clone, like "content" , "this is p" , and if i click on the div, then it will clone entire div "this is p" and "this is h3" both , but now its only cloaning a particular element, not the entire div, see this - https://www.dropbox.com/s/bzfsj17onm6cbkh/Screenshot%202017-04-04%2002.44.00.png?dl=0 how can i do this ? my old fiddle code incase you want to have a look - http://jsfiddle.net/X9tgY/1529/ — user2828442, Apr 03 '17 at 21:15

Context menu - InvokedOn text not getting cloned

1 Answers1