Skip to main content

Using JQuery within JSF 2.0

10 replies [Last post]
johnstv
Offline
Joined: 2009-10-04
Points: 0

Hi folks,

Is it possible to use JQuery within JSF 2.0 pages without resorting to RichFaces? I'm new to Ajax and am keen on getting started with it using JQuery within a JSF environment (note I'm aware that JSF 2.0 already comes with Ajax support).

Thanks in advance.

John

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
rbsrodrigues
Offline
Joined: 2010-07-28
Points: 0

It could be cool if the JSF 2 team create a function in "jsf.js" that we could execute an action and return any data that we want. This is the best solution. It could be very helpfull to integrate with other AJAX libraries like JQuery.

Cheers

rogerk
Offline
Joined: 2004-05-06
Points: 0

How about you produce a prototype of what you are looking for and we can discuss it with the community?

Thanks, Roger.

lml
Offline
Joined: 2010-09-10
Points: 0

Hi: rbsrodrigues

I'm troubled in " call jsf2 action with jquery" for a long time !

I use Jqeury jquery.flexigrid disyplay data list, thru "url" of flexigrid to get the servelet jason data ,it worked fine .but i don't know how to get data from jsf2 action.

can you give me some suggest or demo code !
thanks !

my email:lml919@yeah.net

rbsrodrigues
Offline
Joined: 2010-07-28
Points: 0

Hi,

I think you can do this via Servlet too. The trick I use is to call the JSF Action via EL, like this:

public static String executeAction(final String actionEL, final Class[] paramTypes, final Object[] params) {
FacesContext facesContext = FacesContext.getCurrentInstance();
MethodExpression methodExpression =
facesContext.getApplication().getExpressionFactory().createMethodExpression(FacesUtil.getELContext(), actionEL, String.class, paramTypes);
return (String) methodExpression.invoke(FacesUtil.getELContext(), params);
}

In this case I supose the action always returns a String (the JSON data).

String myJSONdata = executeAction("#{myBean.myAction}", new Class[] {String.class}, new Object[] {"myparam"});

In this case your bean ("myBean") must be in a scope that can be acessed form your servlet (like a session scope or a custom scope) if yout want to use a Bean instance that already exists (and already have the data you want to return as JSON data).

Please, try to use this method and after send me your feedback.

Cheers

rbsrodrigues
Offline
Joined: 2010-07-28
Points: 0

Hi,

We are using JQuery with JSF 2 and we didn't have any problems. For execute JSF actions by AJAX requests we are using the JSF native JavaScript function "jsf.ajax.request" (please see: http://java.dzone.com/articles/jsf-2-client-behaviors).

For the "autocomplete" widget of JQuery UI for example, we used a custom "PhaseListener" to intercept the AJAX call and return the JSON data. We sent with the jQuery AJAX request the name of the ManagedBean and the action to be executed. In our custom PhaseListener we got the ManagedBean via EL and we execute the action via EL too. Then we got the result of the action and write it in the response.

You can use this approach to map other AJAX requests to JSF. In your custom PhaseListener you will be able to find ManagedBeans, execute actions and return everything you want to your AJAX request.

Cheers

rbsrodrigues
Offline
Joined: 2010-07-28
Points: 0

Hi,

This article explain another way to integrate jQuery plugin with JSF 2 AJAX functions:
http://www.verborgh.be/articles/2010/02/12/supporting-jquery-clientbehav...

Cheers

rogerk
Offline
Joined: 2004-05-06
Points: 0

Absolutely. You can use any JavaScript library with JSF 2.0.

johnstv
Offline
Joined: 2009-10-04
Points: 0

Thanks Roger,

That's great news! So far I've made a simple page or two using the component but this uses (I think) the Ajax implementation that comes with JSF 2.0. How then could I configure my pages to use JQuery instead of the default implementation? I'm aware that RichFaces has a component that allows the use of JQuery but I'd like to use JQuery without it.

Regards,

John

miss_duke
Offline
Joined: 2007-08-25
Points: 0

JSF renders just HTML to the browser, so you are free to use jQuery as using with a pure HTML page.

But you have to understand how the id names are rendered to the client, if you put "[b]my-id[/b]" to a JSF component, the appropriate client HTML component may have the id as "[b]my-id[/b]' or "[b]form1:my-id[/b]" or "[b]j_idt6:form1:my-id[/b]". Therefore if you select this component in jQuery you may use the "Attribute Ends With Selector" in jQuery as: [b]$("div[id$='my-id']")[/b]

johnstv
Offline
Joined: 2009-10-04
Points: 0

Thanks for the help folks.

John