对话框不是一个函数错误

Question

我有这个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  

这一行被高亮显示

"Cancel": function(event) {

当我为了防止JQuery和Primefaces冲突而在JSF header中添加This时，就会出现这个问题:

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

我怎样才能解决这个问题?

Answer 1

问题

问题是使用$.noConflict()函数删除了$符号。用jQuery代替。

两个解决方案

这基本上意味着你应该编写像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;
            } 
        }
    });         
}

解决方案。匿名函数中的封闭代码-示例

这是基于这样一个事实:您可以创建匿名函数并将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);

Answer 2

在$.noConflict();之前，$等于jQuery。

$.noConflict();之后，$等于undefined。

这删除了$到jQuery的快捷方式，这就是为什么它不再是一个函数。当您添加另一个使用$的javascript库时，通常只使用$.noConflict();。你的选择是:

1. 不要使用$.noConflict(); .
2. 使用$.noConflict();并将$替换为jQuery。
3. 使用$.noConflict();并使用(function($){ ... })(jQuery)包装您的代码

如果你需要使用$.noConflict();，我建议使用第三个。它通过传递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)