Move option between two selectManyListbox using javascript

[earist neko]

I have two selectManyListbox moving options from Left to Right / Right to Left which i am doing in Javascript and it is working fine.

But when i click submit button error is occured.

error:

16:21:43,968 ERROR [lifecycle] JSF1054: (Phase ID: PROCESS_VALIDATIONS 3, View ID: /pages/main.jspx) Exception thrown during phase execution: javax.faces.event.PhaseEvent[source=com.sun.faces.lifecycle.LifecycleImpl@186c1c]
 16:21:43,968 ERROR [[Blocking Servlet]] Servlet.service() for servlet Blocking Servlet threw exception
 java.util.NoSuchElementException
 	at javax.faces.component.SelectItemsIterator.next(SelectItemsIterator.java:130)
 	at javax.faces.component.SelectItemsIterator.next(SelectItemsIterator.java:157)
 	at javax.faces.component.SelectItemsIterator.next(SelectItemsIterator.java:61)
 	at javax.faces.component.SelectUtils.matchValue(SelectUtils.java:82)
 	at javax.faces.component.UISelectMany.validateValue(UISelectMany.java:465)
 	at javax.faces.component.UIInput.validate(UIInput.java:875)
 	at javax.faces.component.UIInput.executeValidate(UIInput.java:1072)
 	at javax.faces.component.UIInput.processValidators(UIInput.java:672)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIForm.processValidators(UIForm.java:235)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIComponentBase.processValidators(UIComponentBase.java:1058)
 	at javax.faces.component.UIViewRoot.processValidators(UIViewRoot.java:700)
 	at com.sun.faces.lifecycle.ProcessValidationsPhase.execute(ProcessValidationsPhase.java:76)
 	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:100)
 	at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118)
 	at com.icesoft.faces.webapp.http.core.JsfLifecycleExecutor.apply(JsfLifecycleExecutor.java:17)
 	at com.icesoft.faces.webapp.http.core.ReceiveSendUpdates.renderCycle(ReceiveSendUpdates.java:94)
 	at com.icesoft.faces.webapp.http.core.ReceiveSendUpdates.service(ReceiveSendUpdates.java:54)
 	at com.icesoft.faces.webapp.http.core.RequestVerifier.service(RequestVerifier.java:26)
 	at com.icesoft.faces.webapp.http.common.standard.PathDispatcherServer.service(PathDispatcherServer.java:24)
 	at com.icesoft.faces.webapp.http.servlet.MainSessionBoundServlet.service(MainSessionBoundServlet.java:160)
 	at com.icesoft.faces.webapp.http.servlet.SessionDispatcher$1.service(SessionDispatcher.java:38)
 	at com.icesoft.faces.webapp.http.servlet.ThreadBlockingAdaptingServlet.service(ThreadBlockingAdaptingServlet.java:19)
 	at com.icesoft.faces.webapp.http.servlet.EnvironmentAdaptingServlet.service(EnvironmentAdaptingServlet.java:63)
 	at com.icesoft.faces.webapp.http.servlet.SessionDispatcher.service(SessionDispatcher.java:55)
 	at com.icesoft.faces.webapp.http.servlet.SessionVerifier.service(SessionVerifier.java:19)
 	at com.icesoft.faces.webapp.http.servlet.PathDispatcher.service(PathDispatcher.java:23)
 	at com.icesoft.faces.webapp.http.servlet.MainServlet.service(MainServlet.java:91)
 	...

JSP Page (Role editor page):

                    <td class="td2" width="100">
 				<h:selectManyListbox id="lb1"
 					style="height:120px;width:150"
 					value="#{roleController.selectedItemsLeft}" name="listLeft">
 					<f:selectItems value="#{roleController.itemsLeft}" />
 				</h:selectManyListbox>
 				</td>
 
 				<td class="td2" width="20"><ice:panelGrid columns="1">
 				
 					<center>
 					<input type="button" value=" >> " id="moveAllToRight" name="moveAllToRight" onclick=";jMoveToRight(true);" />
 					</center>
 					
 					<center>
 					<input type="button" value=" > " id="moveToRight" name="moveToRight" onclick=";jMoveToRight(false);" />
 					</center>
 					
 					<center>
 					<input type="button" value=" < " id="moveToLeft" name="moveToLeft" onclick=";jMoveToLeft(false);" />
 					</center>
 					
 					<center>
 					<input type="button" value=" << " id="moveAllToLeft" name="moveAllToLeft" onclick=";jMoveToLeft(true);" />
 					</center>
 				</ice:panelGrid></td>
 
 				<td>
 				<h:selectManyListbox id="lb2"
 					style="height:120px;width:150"
 					value="#{roleController.selectedItemsRight}" name="listRight">
 					<f:selectItems value="#{roleController.itemsRight}" />
 				</h:selectManyListbox>
 				</td>

Javascript code :

                    function jMoveToRight(moveAll) 
 					{
 						var srcList = document.getElementById('mainForm:lb1');
 						var destList = document.getElementById('mainForm:lb2');
 						moveList( srcList, destList, moveAll );
 						return false;
 					}
 					
 					function jMoveToLeft(moveAll) 
 					{
 						var srcList = document.getElementById('mainForm:lb2');
 						var destList = document.getElementById('mainForm:lb1');
 						moveList( srcList, destList, moveAll );
 						return false;
 					}
 
 					function moveList( srcList, destList, moveAll ) 
 					{
 						if (moveAll == true)
 						{
 							for(var count=0; count < srcList.length; count++) 
 							{
 								var option = srcList[count];
 								try 
 								{
 									destList.add(new Option(option.text, option.text), null); //Standard
 									srcList.remove(count, null);
 								} 
 								catch(error) 
 								{
 									destList.add(new Option(option.text, option.text)); // IE only
 									srcList.remove(count);
 								} 
 								count--;
 							} 													
 						}
 						else
 						{
 							for(var count=0; count < srcList.length; count++) 
 							{
 								if(srcList[count].selected == true) 
 								{
 									var option = srcList[count];
 									try 
 									{
 										destList.add(new Option(option.text, option.value), null); //Standard
 										srcList.remove(count, null);
 									} 
 									catch(error) 
 									{
 										destList.add(new Option(option.text, option.value)); // IE only
 										srcList.remove(count);
 									}  
 									count--;			 
 								}
 							}
 						}
 						return true;
 					}

Bean:

/**
  * 
  */
 
 import java.io.IOException;
 import java.io.Serializable;
 import java.util.ArrayList;
 import java.util.Iterator;
 import java.util.List;
 
 import javax.faces.event.ActionEvent;
 import javax.faces.model.SelectItem;
 
 
public class RoleControllerBean implements Serializable {
 
 	/**
 	 * 
 	 */
 	private static final long serialVersionUID = -5211692528681508358L;
 
 	public RoleControllerBean() {
 	}
 
 	/**
 	 * Update action from user page
 	 * 
 	 * @jsfActionHandler
 	 * @return
 	 */
 	public String doUpdate() 
 	{
 			// update data ...		
 	}
 
 
 	// Dual List
 	private List<String> selectedItemsLeft = new ArrayList<String>();
 	private List<String> selectedItemsRight = new ArrayList<String>();
 	private List<SelectItem> itemsLeft;
 	private List<SelectItem> itemsRight;
 
 
 	public List<String> getSelectedItemsLeft() {
 		return selectedItemsLeft;
 	}
 
 	public void setSelectedItemsLeft(List<String> selectedItemsLeft) {
 		this.selectedItemsLeft = selectedItemsLeft;
 	}
 
 	public List<String> getSelectedItemsRight() {
 		return selectedItemsRight;
 	}
 
 	public void setSelectedItemsRight(List<String> selectedItemsRight) {
 		this.selectedItemsRight = selectedItemsRight;
 	}
 
 	/**
 	* Show select item on left.
 	*
 	*/
 	public List<SelectItem> getItemsLeft() {
 		itemsLeft = new ArrayList<SelectItem>();
 		List<RoleBean> allRoleBean = RoleFactory.getInstance().getAllRole(); // Get All role item in database
 		List<RoleBean> parents_list = role.getParents(); // Get role parents of item
 		for (RoleBean roleBean : allRoleBean) {
 			if (roleBean.getId() != role.getId() && !parents_list.contains(roleBean)) {
 				itemsLeft.add(new SelectItem(String.valueOf(roleBean.getId()), roleBean.getName()));
 			}
 		}
 		return itemsLeft;
 	}
 
 	public List<SelectItem> getAllInItemLeft() {
 		return itemsLeft;
 	}
 
 	public void setItemsLeft(List<SelectItem> itemsLeft) {
 		this.itemsLeft = itemsLeft;
 	}
 
 	/**
 	* Show select item on right.
 	*
 	*/
 	public List<SelectItem> getItemsRight() {
 		itemsRight = new ArrayList<SelectItem>();
 		List<RoleBean> parents_list = role.getParents(); // Get role parents of item
 		for (RoleBean roleBean : parents_list) {
 			if (roleBean.getId() != role.getId()) {
 				itemsRight.add(new SelectItem(String.valueOf(roleBean.getId()), roleBean.getName()));
 			}
 		}
 		return itemsRight;
 	}
 
 	public void setItemsRight(List<SelectItem> itemsRight) {
 		this.itemsRight = itemsRight;
 	}
 
 	public List<SelectItem> getAllInItemRight() {
 		return itemsRight;
 	}
 
 	public boolean isRoleSelectAction() {
 		return this.roleSelectAction;
 	}
 
 	public void setRoleSelectAction(boolean roleSelectAction) {
 		this.roleSelectAction = roleSelectAction;
 	}
 
 	public void clearSelectedItemsLeft() {
 		this.selectedItemsLeft.clear();
 	}
 
 	public void clearSelectedItemsRight() {
 		this.selectedItemsRight.clear();
 	}
 
 }

I don't wnat to change my backing bean to session scope.
My jsp page show all rolebean object in containment tree. When click the role, Two SelectManyListbox will be shown on Role editor page.
Listbox on left show all roles that the clicked role can use (call getItemLeft ()) and Listbox on right show all used roles of the clicked role (call getItemRight()).
Options can be moved between two listboxes. When Role editor page is refreshed (by click role in containment tree, refresh page etc.) , the options in listboxes are reverted and call getItemLeft ()/getItemRight () again.

Any idea?
Thank in advance and sorry for my bad english.

[Tim Holloway]

JSF tends to force you to use session scope in places where you otherwise could get away without it because of its extensive use of postbacks. The problem is so bad, in fact, that JSF2 added the View scope in order to provide a shorter-term storage alternative.

However, the type of UI you are describing is already available pre-debugged and ready to use as a single component in some of the advanced JSF extension tagsets such as RichFaces.

[earist neko]

Now, i'm using ICEfaces 1.8.0
I want to implement UI look like duallist of ICEFaces or picklist of RichFaces.
But i want some items are directly added to both left and right list when page loaded.

[Tim Holloway]

earist neko wrote:Now, i'm using ICEfaces 1.8.0
I want to implement UI look like duallist of ICEFaces or picklist of RichFaces.
But i want some items are directly added to both left and right list when page loaded.

That actually doesn't make sense, since you explicitly said you wanted to move stuff, and how do you move it if it's already there?

If the normal shuttle control functionality isn't what you want, you're on your own. But if you want to do that using JavaScript, JSF doesn't really factor into the process. JSF doesn't make much difference other than the fact that the ids for the raw HTML controls are a bit different. Your main problems are going to be JavaScript problems, and we have a forum where the JavaScript experts hang out.