This blog is mainly about Java...

Thursday, November 4, 2010

How to add RichFaces to your existing jQuery enabled site

As of Richfaces 3.0, jQuery has been inbuilt. If you don't know what jQuery is, you can watch a video about it here.

We have been using jQuery separately in our project, but wanted to add some Richfaces components. Now since Richfaces is using jQuery, there is a conflict that appears.

They both use $ as their main function name. That might brake the behaviour, and you might see error messages in your web browser, such as:

this.focusKeeper.observe is not a function

[Break on this error] Richfaces.ListBase.ASC="acs";Richfaces...ner('load',this.imagesOnLoad,true);}}
ListBase.js (line 4)

element.dispatchEvent is not a function

[Break on this error] event.eventName=eventName;event.memo=m...nt.fireEvent(event.eventType,event);}
3_3_1....eScript (line 265)

To resolve such cases jQuery introduces the .noConflict() function.

To use the jQuery that is bundled in RichFaces, you have to load the correct script.

<a:loadScript src="resource://jquery.js"/>

Then you can assign jQuery to $j for convenience. Add the following in your javascript code:
$j = jQuery.noConflict();
Then you have to replace all your former $() with $j() or the equivalents $. $[] and function($) with $j. $j[] and function($j)

Your new code now may look something like this:

function showMessages() {

And your Richfaces component will display and work without any problems! Thats it!