Question

动态（远程）加载的Context菜单出现问题。我不知道如何使用$ .getJSON将属性添加到Items命令列表中...我对JQUERY和JSON很新。一直在寻找答案，似乎无法做到正确。

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时遇到了问题。作为旁注，这些菜单可能会变得很大......所以你可能建议的任何性能提升都会很有用。

要使此代码正常运行，我需要做什么？如果可能请提供演示。谢谢。

Answer 1

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

<!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>

JQUERY远程上下文菜单

1 个答案: