jQuery-UI 与 RichFaces 4 的集成答案

【问题标题】：jQuery-UI integration with RichFaces 4jQuery-UI 与 RichFaces 4 的集成
【发布时间】：2013-12-14 01:11:58
【问题描述】：

我正在尝试将 jQuery-UI 功能添加到现有的 JSF2 + RichFaces 4 项目中。到目前为止，我无法让它工作。

这里是使用的 xhtml 代码：

<h:outputStylesheet name="jquery.ui/css/jquery-ui-1.10.3.custom.min.css" />
<h:outputScript name="jquery.ui/js/jquery-ui-1.10.3.custom.js" target="head" />

<script>
    jQuery(document).ready(
        function()
        {
            alert('test1');
            jQuery("#potatoe").resizable();
            alert('test2');
        }
    );
</script>

<div id="potatoe" style="width: 150px;height: 150px;"></div>

在控制台 (Firefox) 中，我从 jQuery-UI JS 文件中收到错误 obj is undefined，并且没有 test2 警报。行号不会有用，但这里是有缺陷的行的代码：

},each:function(obj,callback,args){var name,i=0,length=obj.length,isObj=length===undefined||jQuery.isFunction(obj);

我已经验证，jQuery 和 jQuery-UI 脚本已在浏览器中正确加载。我还使用完全相同的文件测试了这个小代码：

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="jquery.js"></script>
        <script src="jquery-ui-1.10.3.custom.min.js"></script>
    </head>
    <body>
        <script>
            jQuery(document).ready(
                function()
                {
                    alert('test1');
                    jQuery("#test").draggable(
                        {
                            grid: [50, 50]
                        }
                    );
                    jQuery("#test").resizable(
                        {
                            grid: 50
                        }
                    );
                    alert('test2');
                }
            );
        </script>
        <div id="test" style="width: 150px;height: 150px;background-color: red;"></div>
    </body>
</html>

而且它工作正常。 jquery.js 是 jQuery 1.8.2，由网站保存的 RichFaces 4 提供的文件。我做错了什么？

【问题讨论】：

错误来自哪里，jquery.js？

标签： jquery jquery-ui jsf-2 richfaces

【解决方案1】：

jQuery 和 JQueryUI 之间存在一些冲突。当小部件工厂尝试注册 ui.mouse 小部件并失败时会发生错误，因为小部件不包含它应该包含的所有变量（特别是 _childConstructor）。

您可以通过升级到 RF 4.3 来解决此问题，它使用 jQuery 1.8.3 并且似乎工作正常。或者按照 here 的建议重写 jQueryUI。

【讨论】：

那么为什么如果我从 RichFaces/JSF2 网站下载确切的 jquery.js 文件并做一个简单的 html 文件（如解释）它可以工作？
好吧，我不知道它是如何修复的，但它使用 RichFaces 4.3.4 Final（只能从 jQuery 1.8.2 切换到 1.8.3）工作。
RichFaces 4.3 使用 jQueryUI 1.9.2 中的一些小部件，它们被打包在 packed.js（包括 ui.mouse）中，它实际上防止了 1.10.3 中的 ui.mouse 失败。这很奇怪。