JSF to JQuery Component Integration

问题

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.

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

回答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.

回答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!

来源：https://stackoverflow.com/questions/10515384/jsf-to-jquery-component-integration

标签

java

jquery

jquery-ui

jsf

richfaces