3

質問ダイアログに使用するJavaScriptコードがあります。

// Question Dialog
function deletedialog(button, a){      
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $(button).closest("form").find("[id$=deleterow]").click();
                $(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}

しかし、私が見つけることができない何らかの理由で、Firebugでこのエラーが発生します：

TypeError: $(...).dialog is not a function

この行が強調表示されます

「キャンセル」：function（event）{

この問題は、JQueryとPrimefacesの競合を防ぐためにJSFヘッドにこれを追加したときに発生します。

<script type="text/javascript">
    $.noConflict();
</script>

どうすればこの問題を解決できますか？

4

2 に答える 2

6

問題

問題は、関数$を使用してシンボルが削除されていることです。代わりに$.noConflict()使用してください。jQuery

2つのソリューション

これは基本的jQuery(this).dialog("close");に、の代わりにのような関数呼び出しを書く必要があることを意味します$(this).dialog("close");。

より大きなコードの変更を実装するには、次のようにします。

(function($){
    // ... old code using "$" instead of "jQuery"
})(jQuery);

ソリューション番号 1-複数の置換-例

$(...)呼び出しをに置き換えるソリューションは、次のjQuery(...)ようになります。

// Question Dialog
function deletedialog(button, a){      
    jQuery("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                jQuery(button).closest("form").find("[id$=deleterow]").click();
                jQuery(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                jQuery(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}

ソリューション番号 2-匿名関数でコードを囲む-例

これは、無名関数を作成して渡すことができるという事実に基づいていますがjQuery、それを呼び出された引数に割り当てます$。これにより、呼び出し$前に発生するかのように、関数内でシンボルを使用できるようになります。$.noConflict()

(function($){
    // Question Dialog
    function deletedialog(button, a){      
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    $(button).closest("form").find("[id$=deleterow]").click();
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                } 
            }
        });         
    }
})(jQuery);
于 2012-12-27T22:34:19.373 に答える
5

の前$.noConflict();は、$に等しいjQuery。

の後$.noConflict();は、$に等しくなりundefinedます。

$これにより、へのショートカットが削除されjQuery、関数ではなくなります。通常、を使用$.noConflict();する別のjavascriptライブラリを追加する場合にのみ使用します$。オプションは次のとおりです。

  1. 使用しないでください$.noConflict();。
  2. すべてを使用$.noConflict();して、に置き換えます。$jQuery
  3. コードを使用$.noConflict();してラップする(function($){ ... })(jQuery)

を使用する必要がある場合は$.noConflict();、3番目のものを使用することをお勧めします。jQueryをパラメーターとして渡すことにより、$をjQueryに再マップします。投稿したコードを使用すると、次のようになります...

(function($){

    // Question Dialog
    function deletedialog(button, a){      
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    $(button).closest("form").find("[id$=deleterow]").click();
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                } 
            }
        });         
    }

})(jQuery)
于 2012-12-27T22:51:47.750 に答える