JSF到JQuery组件集成

Question

Since any JSF page gets transformed at the server side into its equivalent HTML and sent to the client for rendering, and JQuery at the client side takes the HTML and re renders it.

In theory it should be possible to take the HTML that is a generated by JSF and wrap it into JQuery, if so I would like to know how it's done. Specifically using RichFaces as the JSF implementation if possible.

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

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

The above snippet of JSF is transformed into it's equivalent HTML which is this

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

Shouldn't it be possible to do something like this

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

I've already tried that but it doesn't seem to work.

So please if anyone has any hints, I'd be more than grateful.

Answer 1

Mixing JSF and jquery is doable but there are some gotchas.

JSF is taking over your ids, so if table is in a form with id "form", the actual element id in html would be by default "form:table". I think jquery could have a problem with colon in a selector, so you may mark your table with a class and select by that:

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

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

and set selector as:

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

Answer 2

The Id's of the JSF components are generated by combining the Id's of the containers on the hierarchy with a : separator. Not all the containers count, I don't remember exactly the rules.

Normally some JSF libraries have some client side API to get the component ID's I don't know for richfaces.

Anyway, if you'd like to use jQuery based JSF, take a look at primefaces.

Hope this helps.

Answer 3

This issue might be a '$' name spacing conflict arisen by the Jquery and rich faces component which is made of Prototype.js.Try using jQuery.noconflict() method. I had a similar problem of making the jquery work with richfaces jquery.noconflict() did the trick..

<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>

Good Luck!