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遠程上下文菜單

回答

相關問題