Skip to main content

Dynamically adding input fields to Web Page

1 reply [Last post]
Joined: 2007-09-06

I have a web page that has columns of h:inputText fields similar to a spread sheet. The user can add columns. This is being done using javascript on the client. The javascript creates input elements in the DOM. The last thing I need to add is the equivalent of a valueExpression so that JSF knows where to update the values on the server. I have looked through the DOM input elements that were created from the h:InputText components from the inital page but I have not been able to figure out how to add the value expression equivalent to the input Elements that are being dynamically created.
I have a bad feeling that I am going to have to recreate the whole page over on the server with the value expressions included and then have to send the whole page over to the client just to add a column. This is an existing application which uses a lot of javascript and I am trying to avoid having to rewrite the whole thing.

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2010-01-26

The way I'd approach this, assuming you know in advance the full set of possible input fields, is to have something
like this:
<h:panelGroup id="mypanel">
<h:panelGroup id="input1Panel">
<h:inputText rendered="#{bean.showInput1}" value="#{bean.input1Value}">

<h:panelGroup id="input2Panel">
<h:inputText rendered="#{bean.showInput2}" value="#{bean.input2Value}">
Then just change the value of showInput1/2 to true when you wish to display them, and use
<f:ajax render="mypanel">, or <f:ajax render="input1Panel" - this would be as a child component to,
for example, a selectOneRadio that changes the value of the showInput1 component. The key
point is that the target of the f:ajax render= shouldn't use rendered=, it should always be present or
things will get in a muddle.