How can I have AJAX functionality in my JSF web application?

I have a web application in JSF. I need to add AJAX functionality to it开发者_Python百科. How can I do this?

---

I'll assume that you're using JSF 1.x since JSF 2.x already ships with buitin Ajax functionality and this question would be very rhetorical then. If upgrading to JSF 2.x is indeed not an option, then you'll have to look for a 3rd party JSF 1.x component library with builtin Ajax functionality, such as RichFaces 3.x (not 4.x since it requires JSF 2.x) or PrimeFaces 1.x (not 2.x or newer since it requires JSF 2.x).

RichFaces 3.x ships with Ajax4jsf tag library (<a4j:xxx>) which supports the basic ajax functionality, starting with <a4j:support> tag. This tag is very much similiar to the JSF 2.x <f:ajax> tag.

It is not easily possible to introduce "just" a JS library such as Dojo, jQuery, etc, because you need to alter the JSF component tree state in the server side as well whenever you make changes in the HTML DOM tree in the client side. Those simple JS libraries doesn't take that into account. You would have to write a lot of additional server side code in flavor of a custom view handler. But that is exactly what among others Ajax4jsf is already doing, so you'd like to use it instead of reinventing the wheel.

If you really intend to homegrow; chapter 11 of the book JSF: The Complete Reference gives a good introduction of all things you would need to take into account. You'll see that it's not exactly that trivial.

---

With jsf 2.0 we have f:ajax which you can use

See Also

• how-to-update-a-value-displayed-in-the-page-without-refreshing

---

I know this is an old post but I think this could be helpful for anyone still struggling with JSF 1.1. I found a way to get AJAX functionality with JSF 1.1 - MyFaces just using jQuery and a Servlet. You need these elements:

1. A JSF page that just acts as a container. With a DIV where you want to put your contents and refresh them via AJAX. Inside this DIV, just for the first load, you put a subview with an include for a second JSF page.
2. A second JSF page. Just a standard JSF page with a Session scoped Managed Bean, but intended to be reloaded via AJAX. This page is where you will do a forward from the Servlet on every request. Explained ahead.
3. A Servlet that handles the AJAX requests and reloads the second JSF page. The key is to get the Managed Bean that handles the second JSF from the FacesContext class, so you can manipulate it, change its properties... To do that:

//This goes inside Servlet code FacesContextFactory contextFactory = (FacesContextFactory)FactoryFinder.getFactory(FactoryFinder.FACES_CONTEXT_FACTORY); LifecycleFactory lifecycleFactory = (LifecycleFactory)FactoryFinder.getFactory(FactoryFinder.LIFECYCLE_FACTORY); Lifecycle lifecycle = lifecycleFactory.getLifecycle(LifecycleFactory.DEFAULT_LIFECYCLE);

FacesContext facesContext = contextFactory.getFacesContext(request.getSession().getServletContext(), request, response, lifecycle);

InnerFacesContext.setFacesContextAsCurrentInstance(facesContext);

UIViewRoot view = facesContext.getApplication().getViewHandler().createView(facesContext, ""); facesContext.setViewRoot(view);

// now you have access to the context, you can get the managed bean ValueBinding vb = facesContext.getApplication().createValueBinding("#{YourManagedBean}"); YourManagedBeanClass yourBean = (YourManagedBeanClass) vb.getValue(facesContext);

// now you can manipulate the managed bean properties to finally forward to the JSF page // ... yourBean.setParameter(request.getParameter("myParam")); RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/path/to/your_second_jsf.xhtml"); dispatcher.forward(request, response);

The first JSF page is where you should put javascript functionality for AJAX requests. You call these javascript functions from the second JSF. When AJAX requests do the callback you just put the HTML response inside the container DIV. I.E:

//param: json structure of parameters
function reloadAjaxPanel(param) {
    $.get("/ajaxController", param, function(data) {
        $("#container").html(data);
    }); 
}

Hope it helps!