How can i integrate jQuery in Jsf ?

[Mehdi Ben Larbi]

Hello,

The title is explicit,i want to use jQuery with JSF.
I've searched all over the internet to find a solution to this question and i found two options :

-Use Richfaces.
- The solution proposed here to achieve it without any framework : http://www.verborgh.be/articles/2010/02/12/supporting-jquery-clientbehavior-in-jsf-2-0/

Is there any other way to get the job done and use jQuery with the facelets ?
I can't find any tutorial online.

Thank you.

[Gregg Bolinger]

Kind of depends on what you mean by using jQuery with JSF. jQuery is a JavaScript (client side) library. You can use jQuery with JSF since the rendered JSF is just HTML (and JavaScript depending on the JSF library). The trick is knowing how the JSF components will render themselves. And remember that JSF uses the formId:elementId on input element ID rendering.

[Mehdi Ben Larbi]

Gregg Bolinger wrote:Kind of depends on what you mean by using jQuery with JSF. jQuery is a JavaScript (client side) library. You can use jQuery with JSF since the rendered JSF is just HTML (and JavaScript depending on the JSF library). The trick is knowing how the JSF components will render themselves. And remember that JSF uses the formId:elementId on input element ID rendering.

Thanks for answering.
Well basically i want to use JQuery core ad UI components in the Facelets and maybe communicate with back-end databases ( it's a university assignment ).
I only found the tutorial i posted above and it suggests to create an UIComponent which handles DOM events.
I'm a beginner in jQuery/ajax so is there any simpler way to do it ? Or any tutorial that explains this issue ?

[Gregg Bolinger]

Ok, integrating your own ajax into it is going to be the tricky part because of how JSF communicates with the server. It's unlike most anything (unfortunately) that just lets you hit the server outside of a JSF page. That is why the article talks about writing a custom component for handling the interaction. You're pretty stuck inside the ick that is JSF unless you want to add your own Servlets or some other framework into the mix, which might just make things work. BTW, "the ick that is JSF" is purely my opinion.

[Tim Holloway]

JSF has its own lifecycle requirements. For an assignment like this, it might be more trouble than it's worth to use JSF as your framework, as it will place constraints on how you can use jQuery. Not that JSF is totally hostile to jQuery - I use RichFaces and it has allowed me to get all sorts of jQuery benefits without ever actually using or understanding jQuery. But that's because RichFaces has gone to the trouble to manage all that stuff under the hood. For an assignment where jQuery is the primary concept, I'm afraid that JSF would require you to distort your code in ways that sort of defeat the purpose of the exercise.

[Mehdi Ben Larbi]

Thanks for you answers,JSF is part of the assignment so i have to use it,if i understood right i have three options :

-Define my own component.
-Use a servlet.
-Add richfaces.

-Not very practical,no wonder why so many people complain about JSF.

[Gregg Bolinger]

Well, in JSF's defense (something you'll rarely see me say) part of the point of it is the ability to "componentize" (my word) all of this stuff. So it makes sense, in the JSF world, that you should create a custom component or extend an existing one to add your own behavior into it. That's just the JSF way. It's not bad if you buy into it. In fact, it can be quite elegant. I personally just don't want that level of indirection.

[Mehdi Ben Larbi]

It's not very practical for a beginner as myself.
Anyway,thanks for you help.
I'll start coding and see how it goes.

[Mehdi Ben Larbi]

Hello everyone,

I managed to integrate jQuery using another method,i just used the JavaScript feature of JSF :

<script src="js/jquery.autocomplete.js"></script>
	   <script type="text/javascript"
	    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

I followed this tutorial : http://viralpatel.net/blogs/2009/06/tutorial-create-autocomplete-feature-with-java-jsp-jquery.html

I want to know what's wrong with this method ?
Why is everyone advising me to use Richfaces or create my own component instead,it's not clear.
Is it because of JQuery events not being supported by JSF components ?
Any clarification would be welcomed.
Thanks.

[Gregg Bolinger]

All you did was add some script tags to your page. This is not JSF specific. That is just HTML. Also, you have not integrated anything. The tutorial you used is just JSPs. Not JSF.

[Abdullah Dokuyucu]

To use the JQuery library that way, you will need to use default HTML tags in your facelet file. (And that's not necessarily the JSF way to do things) There is no integration with JSF components.

[Mehdi Ben Larbi]

Ok thanks,going back to the tutorial i realize you're right,he's only using HTML components.
Thanks again for the quick answer.