JSF1.2 with dynamic rendering - input data does not get copied to the managed bean.

Posted on 2007-08-08
Last Modified: 2013-11-24
Hope someone can help me out with this issue.

Using JSF1.2, JBOSS 4.2

I have a complex form where one of the function is to dynamically render input text objects when a user performs some selection. For example, if a user selects Address type of Street, then street address, suite number input texts are rendered on the screen, otherwise if the user selects PO Box, then a PO Box, zip code input texts are rendered for the user.

Hre is the current code snippet.

<h:selectOneMenu value="#{claimform.serviceProvider.addressType}"
                  <f:selectItem itemLabel="PO Box" itemValue="PO Box" />
                  <f:selectItem itemLabel="Street" itemValue="Street"/>                                                            </h:selectOneMenu>

managed bean - listener.
      public void switchAddress(ValueChangeEvent event){
            FacesContext context = FacesContext.getCurrentInstance();

JSP (that controls the disply)
<h:panelGrid id="pnlSvcProvPO" border="0" columns="4" rendered="#{claimform.serviceProvider.poBox}">
                  <h:outputText value="PO Box Number"></h:outputText>
                  <h:inputText value="#{claimform.serviceProvider.poBoxNumber}"></h:inputText>
                  <h:outputText value="Provider Zip Code"></h:outputText>
                  <h:inputText value="#{claimform.serviceProvider.zipCode}"></h:inputText>
<h:panelGrid id="pnlSvcProvSt" border="0" columns="6" rendered="#{not claimform.serviceProvider.poBox}">
                  <h:outputText value="Street Address"></h:outputText>
                  <h:inputText value="#{claimform.serviceProvider.streetAddress}"></h:inputText>
                  <h:outputText value="Suite Number"></h:outputText>
                  <h:inputText value="#{claimform.serviceProvider.suiteNumber}"></h:inputText>
                  <h:outputText value="Provider Zip Code"></h:outputText>
                  <h:inputText value="#{claimform.serviceProvider.zipCode}"></h:inputText>

managed bean- setter
      public boolean getPoBox() {
            if(getAddressType() != null){
                  return (getAddressType().equalsIgnoreCase("PO Box"));
            return false;

Although this is a full form submit, it works out well and the use sees that on selecting PO Box or Street, appropriate text fields are displayed. However, if the page originally displayed PO Box, then upon changing it to Street and submitting the entire form, the streetaddress, suitenumber and zipcode fields never get updated on the backing bean. But if the user leaves the PO Box, then the poboxnumber and zip code are being updated on the backing bean. Why is this happening? Is there a better way to implement this. Hope to hear form someone soon.

Question by:ffarooqui
    LVL 26

    Assisted Solution

    Your JSF code would run on the server, but it looks as if you would like the change for form input boxes to occur on the client before it is sent to the server.  That can only be done with Javascript.

    Author Comment

    Thanks for your response. It is true that I need to do this with java script but will JSF be able to interpret the javascript generated UIInput components? Because at the end, the problem i am seeing is with JSF not being able to recognize the new input fields and convert then to the appropriate UI components.

    Also, if it is purely javascript, how do I name the input text id etc. Do you know about any resource online that deals with integrating javascript this way with standard JSF components.

    Your response is much appreciated.

    LVL 6

    Accepted Solution

    Your probably better off having all the form fields created on the page and then controlling their display using javascript and css, not jsf tags. If you create the input fields dynamically, you need to search for them in the  request I believe, using standard getParameter calls. But you would have to set them yourself to the managed bean. If you submit the form yourself, you can use standard validation code to check for the presence of either a PO box or street address, and control the work flow from there.
    LVL 26

    Assisted Solution

    I agree with SirCrofty that you should create all the input fields in your form, then use Javascript to manage the display.

    When a form is submitted from the browser to the server,  the server does not see the Javascript, only the form.  The reason you are seeing a problem on the JSF side with your fields is that the page from the browser is not including them.

    You can dump all the input parameters from the request on the server side to help you see what is happening.  Or you can use a browser tool to see the form input fields (are you using Firefox?  I recommend WebDeveloper.  There is a tool for IE as well, although it isn't quite as helpful with forms).

    There's nothing strange about naming input fields and manipulating them with Javascript.  It sounds as if you haven't done this with Javascript before, so here are some sites with examples:

    Author Comment

    Thank you both for your help.

    My gut feeling was to do this on the client side via javascript, but I have a certain (perhaps unfounded) dislike to js. Now that I have seen the js example links from mrcoffee365, I realize that there is a place for it after all :). Based on your suggestions it works beautifully.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Suggested Solutions

    For customizing the look of your lightweight component and making it look lucid like it was made of glass. Or: how to make your component more Apple-ish ;) This tip assumes your component to be of rectangular shape and completely opaque. (COD…
    Java had always been an easily readable and understandable language.  Some relatively recent changes in the language seem to be changing this pretty fast, and anyone that had not seen any Java code for the last 5 years will possibly have issues unde…
    Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
    This tutorial covers a step-by-step guide to install VisualVM launcher in eclipse.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now