JSF到JQuery组件集成

Question

由于任何JSF页面都在服务器端转换为等效的HTML，并发送给客户端进行呈现，因此客户端的JQuery会获取HTML并重新呈现。

从理论上讲，应该有可能采用JSF生成的HTML并将其包装到JQuery中，如果这样的话，我想知道它是如何完成的。 如果可能，请特别使用RichFaces作为JSF实现。

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

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

上面的JSF片段被转换为等效的HTML，这是

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

应该不会做这样的事情

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

我已经尝试过了，但是似乎没有用。

因此，如果有人有任何提示，请多谢。

Answer 1

混合使用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>

Answer 2

通过将层次结构上的容器的ID与：分隔符组合在一起，可以生成JSF组件的ID。 并非所有容器都在计数，我不记得确切的规则。

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

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

希望这可以帮助。

Answer 3

这个问题可能是由Prototype.js构成的Jquery和rich face组件引起的'$'名称间距冲突。请尝试使用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>

祝好运！