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

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.

Who is Participating?
SirCroftyConnect With a Mentor Commented:
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.
mrcoffee365Connect With a Mentor Commented:
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.
ffarooquiAuthor Commented:
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.

mrcoffee365Connect With a Mentor Commented:
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:

ffarooquiAuthor Commented:
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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.