May 10th, 2010 by 
Lincoln Baxter III
How to JSF 2.0: – render components outside of the form
Here’s a simple tip for all of you AJAX lovers using JSF 2.0. It is possible to render components that live outside of the form where your AJAX tag lives; actually, it’s possible to render any component by using it’s fully-qualified component ID.
Just prefix the target ID with the naming-container separator character, usually “:”, and provide the full name of the component as it is rendered on the HTML page.
<f:ajax execute="validatePasswords password @this" render=":messages" /> |
Your component ID would look something like, :namingContainer:myComponent. Where the first “:” tells JSF that you want to start looking for the component at the UIViewRoot instance, or the very top level of the component tree.
Here’s a more full fledged example:
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <h:messages id="messages" globalOnly="true" /> <h4>Select a username and password</h4> <h:form id="registerForm" prependId="false"> <h:inputText id="username" value="#{registerBean.username}" required="true" /> <h:inputText id="email" value="#{registerBean.email}" required="true" /> <h:inputSecret id="password" value="#{registerBean.password}" required="true"/> <s:validateForm id="validatePasswords" fields="password1=password password2=passwordConfirm" validatorId="passwordConfirm" /> <h:inputSecret id="passwordConfirm" value="#{registerBean.passwordConfirm}"> <f:ajax execute="validatePasswords password @this" render=":messages" /> </h:inputSecret> <h:commandButton type="submit" id="submitRegister" action="#{registerBean.doRegister}" value="Create my account" /> </h:form> </html> |
Notice how the AJAX tag references the “:messages” component outside of the form – it’s as easy as that!
<f:ajax execute="validatePasswords password @this" render=":messages" /> |
As an extra treat, this form is also using the multiple-component validation feature from Seam, otherwise known as Cross-field validation, or XVal. That’s all for today — enjoy, and as always. Happy coding!
nice one… how did you figured the : before messages out?
A good deal of Google 😉 and a bit of reading.
Hey.. I can’t believe this webpage was the first one that came up when I google searched for “jsf 2.0 f:ajax render”! I’m starting to learn JSF 2.0 and am trying to understand how the ajax render works and what you can do with it. I didn’t know that rendering components outside of the form was a big deal! I guess this rendering tag sort of works like “updateComponent” if you know what I mean haha…
Nice! What got you started learning JSF2? 🙂
I think it’s a combination of a few things:
– I started debugging through the JSF 1.0 lifecycle to see how component renderers and validators work behind the scenes. I got interested in how component-ized and extendable JSF really is.
– Ed Burns gave a speech at work about JSF 2.0 and how it works well with ajax and how annotations make life easier.
– I’ve wanted to convert an existing webpage I created in PHP/Jquery to another language other than PHP. I still want to integrate JQuery since it’s so easy to use, but haven’t found a good tutorial on it.
– JSF 2.0 mixed with Facelets is the way work is heading.. so I’ve gotta be one step ahead of everyone else =).
So.. it seems like a good opportunity to learn JSF 2 =). If JSF2 doesn’t work out, I may try Ruby on Rails or Scala mixed with JQuery.. what do you think?
I’d only write a web-page in Scala if someone threatened to cut me.
JSF2 has gotten so much better, but I wouldn’t use it without a tool like Seam (http://seamframework.org/Seam3/FacesModule)
I’m a little biased because it’s my project, but really. JSF was meant to be extended; and using it by itself can be a bit painful when you try to do more complicated stuff. That’s where Seam Faces and PrettyFaces come in.
JQuery is great. I wish I were better at JavaScript and UI design. Maybe one day I’ll have time to learn 🙂
Cool.. I’ll definitely check out Seam.
Yeah jQuery is so easy to use. One thing I realized about JSF2 is that the tag must be used within the context of a form or else it doesn’t work. With jQuery, you don’t need a form tag at all. You just tell it what you want to POST to the server and it builds the query string, performs an XHR, etc. I would love to be able to use jQuery with JSF2.. I’ll try and integrate them and let you know what happens ;). Hopefully Eclipse doesn’t explode!
Here’s an article that explains what I’m talking about more in depth..
http://www.reynoldsftw.com/2009/03/ive-stopped-using-form-tags-since-jquery-ajax/
“JSF was meant to be extended;”
I think this can’t be repeated enough. Many times you hear people saying that JSF is bad and that it needs Seam or PrettyFaces to fix it.
But this is absolutely not the case. JSF was designed in such a way that it *enabled* such beautiful extensions like Seam.
Even sillier is when people say that JSF is bad and that it needs component libs like RichFaces to fix it. It’s even more clear here that JSF was designed to work with as many third party components as possible and of course not just the simple ones that are supplied with the core.
Maybe you should write a blog posting about how it was explicitly the intention of JSF to allow extensions? 😉
I think you definitely look at Seam 3 Remoting: http://docs.jboss.org/seam/3/remoting/latest/reference/en-US/html_single/
http://seamframework.org/Seam3/RemotingModule
VERY powerful client-server invocation model. It exposes any JavaEE bean method to the client… I mean, damn. I want to try this out, personally – it does remove a lot of the pressure from the web-framework for a lot of things. I can see a new web-framework being based around this model.
[…] bit of searching around on the web took me to Lincoln Baxter’s blog where he mentions rendering components outside of the form and explains that the first “:” tells JSF to start looking from the very to of the JSF […]
Good post!
With RichFaces 3.x and 4 you don’t need to specify :id, just the id will work. It searches outside the immediate naming container (form) if the component can’t be found there. This is a very minor thing but I also find it more natural to use , to separate the id’s. In RichFaces you can do this: render=”id1, id2…”
Hi how to generate popup while displaying validation error. for example for inputtext required=true if i skip and press submit button i want to display h:message in popup is that possible in jsf2.0 . could u repsond this .
Thanks inadvance.
How to prevent a NewLine after the outputText/inputText tags;
Unless you enter the tags within TD tags, not easy to control positioning ..
If i may add something I’ve noticed : if you use templates and the ajax tag is in the template, the form you target must be defined in the template too. It won’t work if the form is on the page using the template.
Not sure about wether it works if the ajax call is in the page and the form is in the template, though.
That’s a very good point. I have 2 separate :define with the :ajax tag referencing an id that occurs in the other :define. Doesn’t work.
I used OpenFaces :ajax and it works as expected, no ‘:’ prefix required either. Same with PrimeFaces :ajax tag – it works as expected.
Works:
<o:ajax render="foodGroupSelect foodDataTable"/>Does not work (using Mojarra):
<f:ajax render="foodGroupSelect :foodDataTable"/>Hi,
We’ve tried this out for one of our projects and it’s not working for some reason. We’re using JSF2 with RichFaces 4.
Keeping in mind that the components are in different forms and in different xhtml file. Does this make any difference?
We have it in a table widget, and when we set the render=”:XXX”, the whole table no longer renders anymore, as it seems to crash at the column with that ajax request on.
The error in the log shown are:
javax.faces.FacesException: contains an unknown id ‘:clientTabPanelWidgetForm” – cannot locate it in the context of the component “selectLink”
Also, does this require Expression Language (in tomcat7) to get this done?
I know this thread has been around for a while, but any help on this would be much appreciated.
Thanks man, It helped 🙂
Nice!