JQUERY远程上下文菜单

动态（远程）加载的上下文菜单有问题。我不知道如何使用$ .getJSON将属性添加到Items命令列表中...我对JQUERY和JSON非常陌生。一直在寻找答案的日子，似乎无法做到正确。JQUERY远程上下文菜单

The backend test CGI scripts produces the following JSON data: 

Test 1)   ["name":"test","icon":"edit"] 
Test 2)   ["Choice1", "Choice2","test1","test2"] 

(Test 2 I was able to get working with another set of code, but not this one)

两者都无法正常工作。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Right Click</title> 
    <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script> 
    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script> 

</head> 
<body> 
<script type="text/javascript"> 
    $(function() 
    { 
    $.contextMenu(
    { 
     selector: '.context-menu-one', 
     callback: function(key, options) 
     { 
      var m = "clicked: " + key; 
      window.console && console.log(m) || alert(m); 
     }, 


     //Nasty block of code Start 
     items: function(request, response) 
     { 
       var url = "http://192.168.1.9/cgi-bin/test.cgi"; 
       $.getJSON(url, 
       { 
         tagmode: "any", 
         format: "json" 
       }) 
       .done(function(data) 
       { 
         $.each(data.items, function(i, item) 
        { 
         //put into list??? 
        }); 
       }); 
     } 
     //Nasty block of code End 



    }); 

    $('.context-menu-one').on('click', function(e) 
    { 
     console.log('clicked', this); 
    }) 
    }); 
</script> 


<div class="context-menu-one"> 
<input id="word" size="50"> 
</div>

最终目标：为了有一个输入框，用户可以在点击的话，他们已经输入并在后端做搜索时提供的选项菜单。（针对特定业务需求的花哨文本编辑器）我对Perl非常熟悉，后端不会很难......我在构建前端UI时遇到问题。作为一个注意事项，这些菜单可能会变得很大......所以你可能会建议的任何性能提升都会有用。

我需要做些什么才能使此代码正常工作？请尽可能提供演示。谢谢。

来源

2016-12-06 Jukari2003

它可能不完美，但这是我找到的解决方案。

<!DOCTYPE html> 
<html> 

<head> 
     <title>Right Click</title> 
     <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" /> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
     <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script> 
     <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta charset="utf-8"/> 

</head> 
<body> 
<script type="text/javascript"> 
    $(function() 
    { 
//------------------------------------------------------------------------------------ 
     var options = {}; 
     options.items = {}; 
     get_word(); 
//------------------------------------------------------------------------------------  
     $.contextMenu(
     { 
       selector: '.context-menu-one', 
      build: function($trigger,e) 
      { 
       return get_word(); 
      }, 
      items: $(options) 
      }); 
//------------------------------------------------------------------------------------ 
     function get_word() 
     { 

      var url = 'http://192.168.1.9/cgi-bin/test3.cgi?'; 
      var cgi = "term=test"; 
      var submit = url + cgi; 
      $.ajax(
       { 
          url: submit, 
          type: 'get', 
          cache: false, 
          async: true, 
          contentType: "application/json; charset=utf-8", 
          dataType: "json", 
          success: function (_result) 
        { 
         $.each(_result, function(item, index) 
         { 
          var object = {name:[index],icon:"edit"}; 
          options.items[index] = object; 
          console.log("-",index); 
         }); 
         return options; 
          } 
       }); 
      return options; 
     } 


     }); 
</script> 





<div class="context-menu-one"> 
    <input id="word" size="50"> 
</div> 

<div class="helpIcon"> 
    <a href="http://192.168.1.9/cgi-bin/test3.cgi">test</a> 
</div> 

</body> 
</html>

来源

2016-12-10 07:07:20 Jukari2003

JQUERY远程上下文菜单

回答

相关问题