Problem in Struts JSP

Question

Hi All,
I have a problem in the JSP where I am using two select list boxes for displaying two lists of size 4, I can transfer the values from one list box to another using buttons. The html part is as mentioned below:
<td colSpan="2">
<html:radio property="types" value="all" onclick="greyOutTypes(true);fb_MoveAllOptions(transSearchQueryForm.availableTypes, transSearchQueryForm.selectedTypes);displayVal()"/><bean:message key="label.report.allTypes" />
<bean:message key="label.report.or"/>
<html:radio property="types" value="select" onclick="greyOutTypes(false);fb_MoveAllOptions(transSearchQueryForm.selectedTypes, transSearchQueryForm.availableTypes);displayVal()"/>
<bean:message key="label.report.selectTypes" />
</td>
</tr>
<tr>
<td>
<br>
</td>
<td colSpan="4">
<table cellpadding="0" cellspacing="2" border="0">
<tr>
<td colspan=3>
<bean:message key="label.report.availableTypes"/>
</td>
<td>
<bean:message key="label.report.selectedTypes"/>
</td>
</tr>
<tr>
<td>
<bean:define name="transSearchQueryForm" id="availableTypesCollection" property="availableTypesTM" />
<html:select size="4" property="availableTypes" multiple="true" styleClass="lists" >
<html:options collection="availableTypesCollection" property="key" labelProperty="value" />
</html:select>
</td>
<td vAlign=center align=middle>
<p>
<input type="button" name="btRemoveGroup" class="smallbutton" value="<" onclick="javascript:fb_SelectBoxMoveSelectedOptions(transSearchQueryForm.selectedTypes, transSearchQueryForm.availableTypes);displayVal()">
<br>
<input type="button" name="btRemoveAllGroups" class="smallbutton" value="<<" onclick="javascript:fb_MoveAllOptions(transSearchQueryForm.selectedTypes, transSearchQueryForm.availableTypes);displayVal()">
</p>
</td>
<td vAlign=center align=middle>
<p>
<input type="button" name="btAddGroup" class="smallbutton" value=">" onclick="javascript:fb_SelectBoxMoveSelectedOptions(transSearchQueryForm.availableTypes, transSearchQueryForm.selectedTypes);displayVal()">
<br>
<input type="button" name="btAddAllGroups" class="smallbutton" value=">>" onclick="javascript:fb_MoveAllOptions(transSearchQueryForm.availableTypes, transSearchQueryForm.selectedTypes);displayVal()">
</p>
</td>
<td>
<bean:define name="transSearchQueryForm" id="selectedTypesCollection" property="selectedTypesTM" />
<html:select property="selectedTypes" multiple="true" size="4" styleClass="lists" >
<html:options collection="selectedTypesCollection" property="key" labelProperty="value" />
</html:select>
</td>
</tr>
</table>
</td>
</tr>
The transfer of values works fine when we select one or more values by individually selecting them. But this fails to work when we do a move all or we click on the Select radio button which eventually does a move all.
After analyzing we found that when we do a move all then the form bean does not get updated with the changes made by the user; like suppose we move all from the Select list to Available list then the availableTypes array (which is associated with the Select for Available Types) show all the types moved to it which is correct but the selectedTypes array (which is associated with the Select for Select Types) also shows all the types in the form bean so when the JSP is reloaded then both the lists boxes show the same entries (all the entries on either side), thus duplicating each entry and causing an error.
The same work absolutely correctly when we manually select one or more entries from either of the list boxes. Meaning both the form bean arrays reflect what the user has selected on the screen.
The methods called on click of the buttons are clearly setting and removing entries selected from the two arrays. We put alerts in the JSP to see the changes in the arrays and they reflect correct values. But once the control has been transferred to the java classes we view the form bean values of the same two arrays which show different values.
Please let me know how I can make the changes of the user reflect in the form bean somehow!
Thanks,
Regards,
Abhishek Arora

Answer 1

Hi,
I have similar code, and i have used java script, i hope it is usefull and it is quite simple in fact very simple
<html>
<head>
     <script language="javascript">
          function moveDualList(leftlist,rightlist)
               if(leftlist.selectedIndex==-1)
                    alert("Nothing Slected To Transfer");
               else
                    newDestList = new Array( rightlist.options.length );
                    var len = 0;
                    for( len = 0; len < rightlist.options.length; len++ )
                         newDestList[ len ] = new Option(rightlist.options[ len ].text,rightlist.options[ len ].value,rightlist.options[ len ].defaultSelected, rightlist.options[ len ].selected);
                         var styletextinlist = rightlist.options[len].style.cssText;
                         newDestList[ len ].style.cssText = styletextinlist;
                    for(var i=0;i<leftlist.options.length;i++)
                         if((leftlist.options!=null) && (leftlist.options[i].selected==true))
                              newDestList[ len ] = new Option(leftlist.options[i].text, leftlist.options[i].value, leftlist.options[i].defaultSelected, leftlist.options[i].selected);
                              var styletextinlist = leftlist.options[i].style.cssText;
                              newDestList[ len ].style.cssText = styletextinlist;                              
                              len++;
                    for ( var j = 0; j < newDestList.length; j++ )
                    if ( newDestList[ j ] != null )
                         rightlist.options[ j ] = newDestList[ j ];                    
                    for( var i = leftlist.length -1; i >= 0 ; i--)
                    if ( leftlist.options[i] != null && ( leftlist.options[i].selected == true))
                         leftlist.options[i]=null;                                                  
     </script>
</head>
     <body>
          <center>
               <form name="coolform">     
               <table border="0">
                    <tr>
                         <td rowspan="2">
                              <select size="10" name="leftlist" multiple>
                                   <option style = "color:RED">One
                                   <option style = "color:BLUE">Two
                                   <option style = "color:GREEN">Three
                              </select>
                         </td>
                         <td align="center"><input type="button" value="Add>>" name = "added" onClick="moveDualList(document.coolform.leftlist,document.coolform.rightlist)"></td>
                         <td rowspan="2">
                              <select name="rightlist" size="10" multiple>                                   
                              </select>
                         </td>
                    </tr>
                    <tr>     
                         <td><input type="button" value="Rem<<" onClick="moveDualList(document.coolform.rightlist,document.coolform.leftlist)"></td>
                    </tr>
               </table>
               </form>
          </center>
     </body>     
</html>