JSF 到 JQuery 组件集成答案

【问题标题】：JSF to JQuery Component IntegrationJSF 到 JQuery 组件集成
【发布时间】：2012-05-17 22:14:26
【问题描述】：

由于任何 JSF 页面都在服务器端转换为等效的 HTML 并发送到客户端进行渲染，客户端的 JQuery 获取 HTML 并重新渲染它。

理论上应该可以将 JSF 生成的 HTML 封装到 JQuery 中，如果是这样，我想知道它是如何完成的。如果可能，特别使用 RichFaces 作为 JSF 实现。

<rich:dataTable id="table">          
  <rich:column>

  </rich:column>
</rich:dataTable>

上面的 JSF 的 sn-p 被转换成它的等效 HTML 就是这个

<table id="table">
  <tr>
    <td></td>
  </tr>
</table>

难道不应该做这样的事情吗

<script type="text/javascript">
   $(document).ready(function () {
     $('#table').dataTable();
}
</script>

我已经尝试过了，但它似乎不起作用。

所以，如果有人有任何提示，我将不胜感激。

【问题讨论】：

你确定 $(document).ready(function () { 正在被调用吗？放置 alert('a') 来查看...因为它应该可以工作
是的，现在叫做 thnx

标签： java jquery jquery-ui jsf richfaces

【解决方案1】：

JSF 组件的 Id 是通过将层次结构中容器的 Id 与 : 分隔符组合起来生成的。不是所有的容器都算数，我不记得确切的规则了。

通常一些 JSF 库有一些客户端 API 来获取我不知道的 Richfaces 的组件 ID。

无论如何，如果您想使用基于 jQuery 的 JSF，请查看 primefaces。

希望这会有所帮助。

【讨论】：

【解决方案2】：

混合 JSF 和 jquery 是可行的，但有一些问题。

JSF 正在接管你的 id，所以如果 table 是一个 id 为“form”的表单，那么 html 中的实际元素 id 将默认为“form:table”。我认为 jquery 的选择器中的冒号可能有问题，因此您可以用一个类标记您的表并通过该类进行选择：

<rich:dataTable styleClass="my-table">          
  <rich:column>

  </rich:column>
</rich:dataTable>

并将选择器设置为：

<script type="text/javascript">
   $(document).ready(function () {
     $('.my-table').dataTable();
}
</script>

【讨论】：

我的回答中包含了示例。
我确实尝试了您的代码，它添加了 jquery 数据表的功能到我的富面孔表中，除了该表不响应 jquey 数据表控制器所采取的操作，例如如果我有一个有 20 行的表，并且一次只显示 10 行，当我导航到下一页时，消息将更改为从 11 到 20 显示，但数据未显示在表上，就像操作一样从未采取过导航，有什么提示吗？
很遗憾我对 RichFaces 不熟悉，所以您可能想问另一个问题。您可以尝试将rich:dataTable 替换为h:dataTable 并将rich:column 替换为h:column。后者应该没有任何潜在的冲突脚本。

【解决方案3】：

这个问题可能是由 Prototype.js 组成的 Jquery 和富面孔组件引起的“$”名称间距冲突。尝试使用 jQuery.noconflict() 方法。我有一个类似的问题，使 jquery 与 Richfaces 一起工作 jquery.noconflict() 成功了..

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
 // Code that uses jQuery's $ can follow here.
 });
// Code that uses other library's $ can follow here.
</script>

祝你好运！

【讨论】：