The page starts with two selectManyListBoxes. The one on the right starts out empty. I then move items to the right with javascript. When I submit the form javascript selects all items in the listBox on the right before submission. JSF fails validation because there are now items being submitted that weren’t originally there.
So my hacky solution is to have a hidden input on the page. Upon form submission have the javascript put all items that are in the right listBox in that hidden input and deselect all items in both listBoxes. So, I’m basically hacking past JSF’s security feature.
My question:
Is there a better/more official/sanctioned way of doing this? I’m sure it’s done all the time. Seems like a pretty common feature.
Move the items by JSF instead of JS. So remove all those JS functions and replace them by JSF action methods. If you aren’t on JSF 2.0 yet which offers
<f:ajax>tag for better user experience, then I suggest to look for a 3rd party component library which offers Ajax capabilities or even supports a whole single component for it. For example RichFaces has a<rich:pickList>for exactly this purpose. Otherwise you have to use two<h:selectManyListbox>components with a bunch of command buttons to move the one to the other.