Untitled

<!DOCTYPE html>
<html>

  <head>
    <title>Jquery context menu</title>
    <meta charset="utf-8" />
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link href="https://rawgit.com/Ruud-cb/jQuery-contextMenu/master/dist/jquery.contextMenu.min.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <br/><br/>
    <span class="context-menu-one btn btn-default">right click me</span>
      <button class="btn btn-default" onclick="$.loadItemsAsync()">Load Async, see log</button>
      <p>Right click -> Status: Will be loaded and shown after 2 sec.</p>
   </div>
    <!--scripts-->
   <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/Ruud-cb/jQuery-contextMenu/master/dist/jquery.ui.position.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/Ruud-cb/jQuery-contextMenu/master/src/jquery.contextMenu.js"></script>
    <script type="text/javascript" src="https://rawgit.com/Ruud-cb/jQuery-contextMenu/master/src/jquery.contextMenu.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </body>

</html>

var $ = jQuery;
$(document).ready(function () {
    'use strict';
    var errorItems = { "errorItem": { name: "Items Load error" },};
    var loadItems = function () {
        var dfd = jQuery.Deferred();
        setTimeout(function () {
            dfd.resolve(subItems);
        }, 2000);
        //setTimeout(function () {
        //    dfd.reject(errorItems);
        //}, 1000);
        return dfd.promise();
    };

    
    var loadItems2 = function () {
        var dfd = jQuery.Deferred();

        setTimeout(function () {
            dfd.reject(errorItems);
        }, 4000);
        return dfd.promise();
    };

    var subItems = {
        "sub1": { name: "Submenu1", icon: "edit" },
        "sub2": { name: "Submenu2", icon: "cut" },
        "moresub": {
            name: "Even deeper",
            items: loadItems2(),
        }
    };

    $.contextMenu({
        selector: '.context-menu-one',
        build: function ($trigger, e) {
            return {
                callback: function (key, options) {
                    var m = "clicked: " + key;
                    console.log(m);
                },
                items: {
                    "edit": { name: "Edit", icon: "edit" },
                    "cut": { name: "Cut", icon: "cut" },
                    "status": {
                        name: "Status",
                        icon: "delete",
                        items: loadItems(),
                    },
                    "normalSub": {
                        name: "Normal Sub",
                        items: {
                            "normalsub1": { name: "normal Sub 1"},
                            "normalsub2": { name: "normal Sub 2"},
                            "normalsub3": { name: "normal Sub 3" },
                        }
                    }
                }
            };
        }
    });

    //normal promise usage example
     var completedPromise = function (status) {
         console.log("completed promise:", status);
     };

     var failPromise = function (status) {
         console.log("fail promise:", status);
     };

     var notifyPromise = function (status) {
         console.log("notify promise:", status);
     };

    $.loadItemsAsync = function() {
        console.log("loadItemsAsync");
        var promise = loadItems();
        $.when(promise).then(completedPromise, failPromise, notifyPromise);
    };

});

/* Styles go here */