How to change name in context menu dynamicaly by a condition

debugcn Published at Dev

F4k3d

I am using this contextmenu plugin for jQuery:

http://swisnl.github.io/jQuery-contextMenu/demo/trigger-left-click.html.

and I am trying to change the name of a menu item dynamically by a simple condition. Unfortunately it isn't possible to change a menu item's name dynamically or I don't know how to do so...

I tried it this way:

   items: {
           "item": {name: (x > 10) ? 'name1' : 'name2', disabled: false},
           "sep1": "----------------",
           ....
   }

but it isn't working. Then I tried it with an anonymous function:

 items: {
         "item": {name: function(){ return (x > 10) ? 'name1' : 'name2'; }, disabled: false},
         "sep1": "----------------",
         ....
 }

but it isn't working as well... Now I have no other clue, so I am asking you for help. Do you have useful advice for me? Any help is appreciated.

Thanks in advance.

rafaelcastrocouto

The name will be defined at the beginning, not every click. If you wanna redefine the item name every time you should do it like this:

var x = 0;
$(function() {
  $.contextMenu({
    selector: '.context-menu-one', 
    callback: function(key, options) {
      var m = "clicked: " + key;
    },
    items: {
      "edit": {name: "Edit", icon: "edit"},
      "cut": {name: "Cut", icon: "cut"},
      copy: {name: "Copy", icon: "copy"},
      "paste": {name: "Paste", icon: "paste"},
      "delete": {name: "Delete", icon: "delete"},
      "sep1": "---------",
      "quit": {name: "Quit", icon: function(){
        return 'icon icon-quit';
      }}
    }
  });

  $('.context-menu-one').on('contextmenu', function(e){
    $('.icon-edit span').text('x: ' + x);
    x++;
  });    
});

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js"></script>
  <link rel="stylesheet" href="http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<span class="context-menu-one btn btn-neutral">right click me</span>
</body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.