1

以下のjQuery1.8.11.jsのコンテキストメニュープラグインを使用しており、「ビルド」コールバックを使用して、クリックするたびにメニューを動的に作成しています。

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の設定は機能しますが、これは非推奨であるため、使用したくありません。

アイテムを非同期でロードする他の方法はありますか、またはこれにはプラグインの変更が必要ですか？

4

1 に答える 1

1

同じ問題が発生しました。jQueryUIメニューウィジェットに切り替えて、フォーカスイベントと更新機能を使用しました。

ここにフィドルがあります：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")
                })
            }
        }
    });

});
于 2013-06-17T10:47:08.840 に答える