Jquery Context Menu ajax fetch menu items

to add items to the context menu dynamically you need to make a couple changes

$.contextMenu({
    selector: '#helpIcon',
    trigger: 'hover',
    delay: 300,
    build: function($trigger, e){
        var options = {
            callback: function (key) {
                var manual;
                if (key == "adminComp") {
                    manual = "AdminCompanion.pdf";
                } else {
                    manual = "TeacherCompanion.pdf";
                }
                window.open("/HelpManuals/" + manual);
            },
            items: {}
        }

        //how to populate from model
        @foreach(var temp in Model.FileList){
            <text> 
                options.items[temp.Value] = {
                    name: temp.Name,
                    icon: 'open'
                }
            </text>
        }

        //should be able to do an ajax call here but I believe this will be called 
        //every time the context is triggered which may cause performance issues
        $.ajax({
            url: '@Url.Action("Action", "Controller")',
            type: 'get',
            cache: false,
            async: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (_result) {
            if (_result.Success) {
                $.each(_result, function(item, index){
                    options.items[item.Value] = {
                        name: item.Name,
                        icon: 'open'
                    }
                });
            }
        });
        return options;
    }

});

so you use build and inside of that define options and put your callback in there. The items defined in there is empty and is populated in the build dynamically. We build our list off of what is passed through the model but I believe you can put the ajax call in the build like I have shown above. Hopefully this will get you on the right track at least.

I solved this problem the following way.

On a user-triggered right-click I return false in the build-function. This will prevent the context-menu from opening. Instead of opeing the context-menu I start an ajax-call to the server to get the contextMenu-entries.

When the ajax-call finishes successfully I create the items and save the items on the $trigger in a data-property. After saving the menuItems in the data-property I open the context-menu manually.

When the build-function is executed again, I get the items from the data-property.

$.contextMenu({
    build: function ($trigger, e)
    {
        // check if the menu-items have been saved in the previous call
        if ($trigger.data("contextMenuItems") != null)
        {
            // get options from $trigger
            var options = $trigger.data("contextMenuItems");

            // clear $trigger.data("contextMenuItems"),
            // so that menuitems are gotten next time user does a rightclick 
            // from the server again.
            $trigger.data("contextMenuItems", null);
            return options;
        }
        else
        {
            var options = {
                callback: function (key)
                {
                    alert(key);
                },
                items: {}
            };
            $.ajax({
                url: "GetMenuItemsFromServer",
                success: function (response, status, xhr)
                {
                    // for each menu-item returned from the server
                    for (var i = 0; i < response.length; i++)
                    {
                        var ri = response[i];
                        // save the menu-item from the server in the options.items object
                        options.items[ri.id] = ri;
                    }
                    // save the options on the table-row;
                    $trigger.data("contextMenuItems", options);

                    // open the context-menu (reopen)
                    $trigger.contextMenu();
                },
                error: function (response, status, xhr)
                {
                    if (xhr instanceof Error)
                    {
                        alert(xhr);
                    }
                    else
                    {
                        alert($($.parseHTML(response.responseText)).find("h2").text());
                    }
                }
            });
            // This return false here is important                
            return false;
        }
   });

Here's my solution using deferred, important to know that this feature is supported for sub-menus only

$(function () {
            $.contextMenu({
                selector: '.SomeClass',
                build: function ($trigger, e) {
                    var options = {
                        callback: function (key, options) {
                            // some call back
                        },
                        items: JSON.parse($trigger.attr('data-storage')) //this is initial static menu from HTML attribute you can use any static menu here
                    };

                    options.items['Reservations'] = {
                            name: $trigger.attr('data-reservations'),
                            icon: "checkmark",
                            items: loadItems($trigger) // this is AJAX loaded submenu
                        };
                    return options;
                }
            });
        });
        
        // Now this function loads submenu items in my case server responds with 'Reservations' object
        var loadItems = function ($trigger) {
        var dfd = jQuery.Deferred();
        $.ajax({
            type: "post",
            url: "/ajax.php",
            cache: false,
            data: {
              // request parameters are not importaint here use whatever you need to get data from your server
                
            },
            success: function (data) {
                dfd.resolve(data.Reservations);
            }
        });
        return dfd.promise();
    };