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)

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!

8 comments:

Anonymous said...

La meg bare si: $().something ? Æsj!

Luciano Pontes said...

Tanks, work fine!

Anonymous said...

Thanks.

Anonymous said...

thank you!!!

Anonymous said...

Thank you very much! it was really helpful

Anonymous said...

While including in jsf I am getting exception...PLease help me out...You can refer to stack trace exception on this link...

http://stackoverflow.com/questions/8455710/a4jloadscript-for-loading-jquery-script-throwing-exception

Please guide me on how to solve this.

Renato Camargos said...

I'm in 2017. About 7 years later and this post saved my life.
Thanks man.

Shervin Asgari said...

Haha thats pretty funny man :)
Glad to help

Labels