Enabling jQuery contextMenu item on ajax request

I’m trying to update contextmenu item if ajax requests alters my div content.

Here is what I mean I have a div like this :

  • Override site specific JavaScript right click context menu with browser specific right click context menu
  • Context menu becomes unclickable above HTML video layer
  • Trigger right-click
  • 2 jQuery.contextMenu on a page with different trigger
  • How to add a custom right-click menu to a webpage?
  • Right mouse click detection on SVG shape in JavaScript not working
  • <div id="" class="message" data-options='{"update":"YES", "delete":"NO">
    </div>
    

    And context Menu jquery part (this happens only once when body loads):

    $.contextMenu({
            selector: '.message', 
            trigger: 'left',
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m); 
            },
            items: {
                "update": {
                    name: "Update",
                    disabled: function(key, opt) { 
                        return (this.data("options").update === "NO")
                    },
                },
                "delete": {
                    name: "Delete", 
                     disabled: function(key, opt) { 
                        return (this.data("options").delete=== "NO")
                    }
               //etc. rest of the code
    

    I’m looking to re-create it when some ajax request happens or disable/enable items somehow

    So now some ajax requests happen and on success I’m trying to update div.message data-option because I though of enabling/disabling buttons like this :

    In ajax.success function :
    - disable or enable menu items 
    

    --------Actually--------Simplified

    Actually this question/answer is very similar to my current issue :

    Disable and enable jQuery context menu

    I want to enable/disable contextMenu item on some button click, if I were able to do in this dummy example I think I could handle ajax request as well.

  • invoke primefaces context menu from java script
  • How to retrieve the element where a contextmenu has been executed
  • How to add a custom right-click menu to a webpage?
  • jQuery Right-Click Context Menu Help!
  • Prevent menu key from showing a context menu
  • popup window at chrome extensions' context menu
  • One Solution collect form web for “Enabling jQuery contextMenu item on ajax request”

    I used build option to add new items, you can see that you can do with items here whatever you want: http://jsfiddle.net/oceog/Tvv4P/1/

    HTML:

    <div class="context-menu-one box menu-1">
        <strong>right click me</strong>
    </div>
    
    <button id="add"> Add item</button>
    <button id="disable_cut"> Disable cut</button>
    <button id="enable_cut"> enable cut</button>
    ​
    

    JS:

    $.contextMenu({
        selector: '.context-menu-one',
        build: function($trigger, e) {
            console.log(e);
            return {
                callback: function(key, options) {
                    var m = "clicked: " + key;
                    console.log(m);
                    //window.console && console.log(m) || alert(m); 
                },
                items: items
            };
        }
    });
    var 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: "quit"
        }};
    var newitemN=0;
    $('#add').click(function() {
                var newitem={};
            newitem['newitem_'+newitemN]={
                name: 'new item #'+newitemN,
                icon: "copy"
            };
       newitemN++;
       $.extend(items,newitem);
    });
    
    $('#disable_cut').click(function() {
        items.cut.disabled=true;
    });
    
    $('#enable_cut').click(function() {
        items.cut.disabled=false;
    });