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)

and
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() {
  $j("div#messagetextPanel").fadeIn("fast");
}

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