javascript - 未指定项目 - 带有动态项目的上下文菜单

Question

我有一个简单的页面，它使用数据表显示调用中心队列，并使用上下文菜单(委托(delegate)给此数据表)我想指定调用中心代理到队列中的调用。到目前为止，在 SO 的帮助下，我想出的一切都有效。然而，问题是当右键单击控制台日志时显示“未指定任何项目”。是的，他们是......有人可以帮我指出我犯了 fatal error 的地方......吗？

来自 ActiveList 的数据是一个 JSON 结果(数组)，仅包含 { "Agent": "Mario"} 等。我已经尝试将 ri.agent 分配给结果，这没有用。

   // Call the dataTables jQuery plugin - SQL Server Wachtrij view.

   $(document).ready(function() {
   var table =  $('#dataTable').dataTable(
   {
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "bProcessing": false,
    "sAjaxSource": "wachtrij.php",
    "aoColumns": [
          { mData: 'callcenter' } ,
          { mData: 'Tijdstip_binnengekomen' },
          { mData: 'Wachttijd'},
          { mData: 'telefoonnummer'},
          { mData: 'Wachtrij_Positie'},
          { mData: 'callid'},
              {"defaultContent":'<button 
class="btn">Toewijzen aan Agent</button>'}
        ],    
        })

// Make sure dataTable refreshes every 5 seconds 

setInterval( function () {
    table.api().ajax.reload();
}, 5000 );

$.contextMenu({
selector: '#dataTable td',
trigger: 'right',
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({
            method: "GET",
            url: "ActiveList.php",
            "aoColumns": [
          { aData: 'agent' }
        ],
        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;
    }
   }

 });

});

Answer 1

尝试了另一种对我有用的方法。我想我可以在调用 ContextMenu 之前创建一个数组并在函数本身中使用它，而不是使用“Build”。奇迹般有效。稍后将添加用表格刷新代理列表。

 // Call the dataTables jQuery plugin - SQL Server Wachtrij view.

  $(document).ready(function() {
  var table =  $('#dataTable').dataTable(
  {
    "bPaginate": false,
    "bFilter": false,
    "bInfo": false,
    "bProcessing": false,
    "sAjaxSource": "wachtrij.php",
    "aoColumns": [
          { mData: 'callcenter' } ,
          { mData: 'Tijdstip_binnengekomen' },
          { mData: 'Wachttijd'},
          { mData: 'telefoonnummer'},
          { mData: 'Wachtrij_Positie'},
          { mData: 'callid'}
        ],    
        })

 // Make sure dataTable refreshes every 5 seconds 

setInterval( function () {
        table.api().ajax.reload();
    }, 5000 );

 $(function(){

// Get agentdata from server

var request = new XMLHttpRequest()

request.open('GET', 'ActiveList.php', true)
request.onload = function() {
var data = JSON.parse(this.response)

// create array from http call 

var menuitems = [];
$.each(data, function( key, value ) {
   menuitems[key] =  { name: value.agent, icon: "checkmark", onclick: function () { 
RToTb(array_name) }};
});

//create the contextmenu using the array as menuitems

$.contextMenu({
selector: '#dataTable td',
trigger: 'left',
items: menuitems
  });

  }
//Send the request

  request.send()    

  });

 });