Question

我正在使用jQuery 1.8.11.js的以下上下文菜单插件，并使用“build”回调在每次点击时动态创建菜单。

http://medialize.github.com/jQuery-contextMenu/index.html

我希望能够在单击项目时动态加载菜单选项（调用控制器方法，根据项目的ID确定可用选项）

我的问题是这个上下文菜单库似乎不支持ajax调用，如果我尝试在'build'回调中进行ajax调用，它显然不会等到ajax调用完成。

以下是我想要做的精简版片段：

$.contextMenu({
    selector: '" + contextMenuSelector + @"',
    build: function ($trigger, e) {
    menuOptionsArray = [];
        //Ajax START
        $.ajax({
             type: "POST",
             url: <myurl>,
             //async: false, //**IF I UN-COMMENT THIS, IT WORKS**
             context: $(this),
             success: function (data) {
                   //BUILD THE OPTIONS ARRAY
                   menuOptionsArray...
                }
            });
         //Ajax END

         //This returns before the ajax call finishes               
         return {
            items: menuOptionsArray
        };
    }

在上面，设置async = false有效，但由于不推荐使用，我不想使用它。

有没有其他方法可以异步加载项目，还是需要修改插件？

Answer 1

我遇到了同样的问题，我切换到jQuery UI菜单小部件并使用了焦点事件和刷新功能。

这是一个小提琴：http://jsfiddle.net/3r5FX/

我在这里写了一些关于它的文章： http://imnotsmartjustlucky.blogspot.se/2013/06/jquery-context-menu-asynchronousajax.html

代码摘录： HTML：

<ul id="menu" style="width:300px">
 <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
 <li>
  <a href="#">Delphi</a>
  <ul>
                 <li><a href="#"><img src="http://cdn-3.nikon-cdn.com/static/images/icons/icon_loading.gif"/></a></li>
  </ul>
 </li>
 <li><a href="#">Saarland</a></li>
 <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>

JS：

$(function(){
    $("#menu").menu({
        focus: function( event, ui ) {
            if(ui.item.children("ul").children("li").children("a").children("img").length > 0){
                $.get("http://fiddle.jshell.net", function(data){
                    ui.item.children("ul").html("<li><a href='#'>Viktor</a></li><li><a href='#'>Sweden</a></li><li><a href='#'>Luleå</a></li>")
                    $("#menu").menu("refresh")
                })
            }
        }
    });

});

jQuery contextMenu通过Ajax调用加载项目

1 个答案: