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!

Posted in JSF2, Seam

18 Comments

  1. Dominik says:

    nice one… how did you figured the : before messages out?

    1. Lincoln says:

      A good deal of Google 😉 and a bit of reading.

  2. Tamer Dakhlallah says:

    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…

  3. Lincoln says:

    Nice! What got you started learning JSF2? 🙂

    1. Tamer Dakhlallah says:

      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?

      1. Lincoln says:

        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 🙂

      2. Tamer Dakhlallah says:

        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/

      3. henk says:

        “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? 😉

  4. Lincoln says:

    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.

  5. […] 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 […]

  6. Max says:

    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…”

  7. Ravi says:

    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.

  8. Columbia says:

    How to prevent a NewLine after the outputText/inputText tags;

    Unless you enter the tags within TD tags, not easy to control positioning ..

  9. Gaël Renoux says:

    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.

    1. Eric Snell says:

      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"/>
  10. Moe says:

    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.

  11. Shirish says:

    Thanks man, It helped 🙂

  12. Abraão Isvi says:

    Nice!

Reply to Lincoln




Please note: In order to submit code or special characters, wrap it in

[code lang="xml"][/code]
(for your language) - or your tags will be eaten.

Please note: Comment moderation is enabled and may delay your comment from appearing. There is no need to resubmit your comment.