title: How to create a picklist in JSF? Tried moving items using JS/jQuery, but submit errors with "Validation Error: Value is not valid"
body: <p>I am creating web application using JSF 2.0 where I am assigning users to view projects. For that I have two list. First list that have users who are not assigned that project and list B have users who have assigned that project. And we can interchange the data.</p>
  
  <p>Code I have is </p>
  
  <hr>
  
  <pre><code>&lt;t:selectManyListbox id="sourceCars"  style="width: 40%;"
                       value="#{PersonalInformationDataBean.listOfUsers}" size="10"&gt;
      &lt;t:selectItems value="#{PersonalInformationDataBean.showAllMyRemData()}" var="t"
                     itemLabel="#{t.title}" itemValue="#{t.status}"/&gt;
  &lt;/t:selectManyListbox&gt;
  
  &lt;span&gt;
      &lt;input type="button" value=" &gt;&gt; " id="dbleMeRight"/&gt;
      &lt;input type="button" value=" &amp;lt;&amp;lt; " id="dbleMeLeft"/&gt;
  &lt;/span&gt;
  
  &lt;t:selectManyListbox id="targetCars"  style="width: 40%;"
                       value="#{PersonalInformationDataBean.listOfUsers}" size="10"&gt;
      &lt;t:selectItems value="#{PersonalInformationDataBean.showAllMyData()}" var="n"
                     itemLabel="#{n.title}" itemValue="#{n.status}"/&gt;
  &lt;/t:selectManyListbox&gt;
  
  &lt;h:commandButton value="Save Edited Project Info." action="#{PersonalInformationDataBean.editPatentData(MyLogin.loginname)}" /&gt;
  </code></pre>
  
  <p>where t is <code>xmlns:t="http://myfaces.apache.org/tomahawk"</code>.</p>
  
  <hr>
  
  <p><strong>PersonalInformationDataBean.java</strong></p>
  
  <pre><code>private List&lt;String&gt; listOfUsers = new ArrayList&lt;String&gt;();
  private List&lt;String&gt; listOfUsers002 = new ArrayList&lt;String&gt;();
  private List&lt;CommonBean01&gt; listOfListUsers = new ArrayList&lt;CommonBean01&gt;();
  private List&lt;CommonBean01&gt; listOfListUsers002 = new ArrayList&lt;CommonBean01&gt;();
  
  // above getter and setters
  
  Iterator itr = listOfUsers.iterator();
  System.out.println("list of usersssss == " + listOfUsers);
  
  while (itr.hasNext()) {
      psmtt = conn.prepareStatement("INSERT INTO patentInvite (invitedWhom, patentId, personalInfoId) VALUES (?,?,?)");
      String inviteWhom = itr.next().toString();
      System.out.println("to who we have invited is " + inviteWhom);
      psmtt.setString(1, inviteWhom);
      psmtt.setLong(2, patentId);
      psmtt.setLong(3, personalInfoId);
      psmtt.execute();
  
      System.out.println("Data entered is == " + inviteWhom + "==" + patentId + "==" + personalInfoId + "==");
  }
  
  public List&lt;CommonBean01&gt; showAllMyRemData() {
      try {
          CommonBean01 commonBean = new CommonBean01();
          listOfListUsers = new ArrayList&lt;CommonBean01&gt;();
          ConnectToDatabase db = new ConnectToDatabase();
          Connection conn = db.makeconnection();
  
  
          PreparedStatement psmt = conn.prepareStatement("SELECT * FROM patentInvite WHERE patentId=?");
          System.out.println("patent id here is " + patentId);
          psmt.setLong(1, patentId);
          ResultSet rs = psmt.executeQuery(), rs2 = null;
          PreparedStatement pstt = null;
  
          int dd = 0;
          String listOfUser = "";
          int myCounter = 0;
          while (rs.next()) {
              if (myCounter==0) {
                  listOfUser = "'" + rs.getString(2) + "'"; 
              } else {
                  listOfUser = listOfUser + ",'" + rs.getString(2) + "'";
              }
              myCounter++;
          }
  
          System.out.println("id selected are :: " + listOfUser);
  
          psmt = conn.prepareStatement("SELECT userid, fullName, userType FROM userDetails WHERE userid NOT IN (" + listOfUser + ")");
          rs = psmt.executeQuery();
  
          listOfListUsers = new ArrayList&lt;CommonBean01&gt;();
          while (rs.next()) {
              commonBean = new CommonBean01();
              commonBean.setStatus(rs.getString(1));
              commonBean.setTitle(rs.getString(2) + " [" + rs.getString(3) + "]");
              listOfListUsers.add(commonBean);
              System.out.println("wat say....(" + rs.getString(1) + ") -- " + rs.getString(2) + "");
          }
          return listOfListUsers;
      } catch (Exception e) {
          System.out.println("Exception = " + e);
          return null;
      }
  }
  
  public List&lt;CommonBean01&gt; showAllMyData() {
      try {
          CommonBean01 commonBean = new CommonBean01();
          listOfListUsers = new ArrayList&lt;CommonBean01&gt;();
          ConnectToDatabase db = new ConnectToDatabase();
          Connection conn = db.makeconnection();
  
          PreparedStatement psmt = conn.prepareStatement("SELECT * FROM patentInvite WHERE patentId=?");
          System.out.println("patent id here is " + patentId);
          psmt.setLong(1, patentId);
          ResultSet rs = psmt.executeQuery(), rs2 = null;
          PreparedStatement pstt = null;
          listOfListUsers = new ArrayList&lt;CommonBean01&gt;();
  
          while (rs.next()) {
              System.out.println("");
              pstt = conn.prepareStatement("SELECT userid, fullName, userType FROM userDetails WHERE userid=?");
              pstt.setString(1, rs.getString(2));
              System.out.println("setting id for " + rs.getString(1));
              rs2 = pstt.executeQuery();
  
              int dd = 0;
              while (rs2.next()) {
                  System.out.println("inside data " + rs2.getString(2));
                  commonBean = new CommonBean01();
                  commonBean.setStatus(rs2.getString(1));
                  commonBean.setTitle(rs2.getString(2) + " [" + rs2.getString(3) + "]");
                  listOfListUsers.add(commonBean);
                  System.out.println("wat say here....(" + rs2.getString(1) + ") -- " + rs2.getString(2) + "");
              }
          }
          return listOfListUsers;
      } catch (Exception e) {
          System.out.println("Exception = " + e);
          return null;
      }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>CommonBean01.java</strong></p>
  
  <pre><code>public class CommonBean01 {
      private String title;
      private String status;
  
      public String getStatus() {
          return status;
      }
  
      public void setStatus(String status) {
          this.status = status;
      }
  
      public String getTitle() {
          return title;
      }
  
      public void setTitle(String title) {
          this.title = title;
      }
  
      @Override
      public boolean equals(Object obj) {
          if (obj == null) {
              return false;
          }
          if (getClass() != obj.getClass()) {
              return false;
          }
          final CommonBean01 other = (CommonBean01) obj;
          if ((this.status == null) ? (other.status != null) : !this.status.equals(other.status)) {
              return false;
          }
          return true;
      }
  
      @Override
      public int hashCode() {
          int hash = 5;
          hash = 89 * hash + (this.status != null ? this.status.hashCode() : 0);
          return hash;
      }
  }
  </code></pre>
  
  <p><hr>
  Now when I take user from left list to right list and click <code>Save Edit Info</code> button, I get error as <code>targetCars: Validation Error: Value is not valid</code>.</p>
  
  <p><strong>Note :</strong></p>
  
  <p>When I don't change any list and click <code>Save Edit Info</code>, it works well.</p>
  
  <p>Any idea why I am getting this error?</p>
  
  <hr>
  
  <h2>Edit 1</h2>
  
  <p>I made below changes </p>
  
  <pre><code>&lt;t:selectManyListbox id="sourceCars"  style="width: 40%;"
                       value="#{PersonalInformationDataBean.listOfUsers002}" size="10"&gt;
      &lt;t:selectItems value="#{PersonalInformationDataBean.showAllMyRemData()}" var="t"
                     itemLabel="#{t.title}" itemValue="#{t.status}"/&gt;
  &lt;/t:selectManyListbox&gt;
  
  
  public List&lt;CommonBean01&gt; showAllMyRemData() {
      try {
          CommonBean01 commonBean = new CommonBean01();
          listOfListUsers002 = new ArrayList&lt;CommonBean01&gt;();
          ConnectToDatabase db = new ConnectToDatabase();
          Connection conn = db.makeconnection();
  
  
          PreparedStatement psmt = conn.prepareStatement("SELECT * FROM patentInvite WHERE patentId=?");
          System.out.println("patent id here is " + patentId);
          psmt.setLong(1, patentId);
          ResultSet rs = psmt.executeQuery(), rs2 = null;
          PreparedStatement pstt = null;
  
          int dd = 0;
          String listOfUser = "";
          int myCounter = 0;
          while (rs.next()) {
              if (myCounter==0) {
                  listOfUser = "'" + rs.getString(2) + "'"; 
              } else {
                  listOfUser = listOfUser + ",'" + rs.getString(2) + "'";
              }
              myCounter++;
          }
  
          System.out.println("id selected are :: " + listOfUser);
  
          psmt = conn.prepareStatement("SELECT userid, fullName, userType FROM userDetails WHERE userid NOT IN (" + listOfUser + ")");
          rs = psmt.executeQuery();
  
          listOfListUsers002 = new ArrayList&lt;CommonBean01&gt;();
          while (rs.next()) {
              commonBean = new CommonBean01();
              commonBean.setStatus(rs.getString(1));
              commonBean.setTitle(rs.getString(2) + " [" + rs.getString(3) + "]");
              listOfListUsers002.add(commonBean);
              System.out.println("wat say....(" + rs.getString(1) + ") -- " + rs.getString(2) + "");
          }
          return listOfListUsers002;
      } catch (Exception e) {
          System.out.println("Exception = " + e);
          return null;
      }
  }
  </code></pre>
  
  <p>still I am getting same error.</p>
  
  <hr>
  
  <h2>Edit 2</h2>
  
  <p>jQuery code to move items are as below.</p>
  
  <pre><code>$(function() {
      var  sourceCars=$('#sourceCars option').clone();
      $('#filterDis').change(function() {
          var val = $(this).val();
          alert("changed me=="+val+"==");
          $('#sourceCars').empty();
          alert("changed me=="+sourceCars+"==");
          sourceCars.filter(function(idx, el) {
              var found=false;
              $('#targetCars option').each(function(){
                  if ($(this).val()===$(el).text())
                      found=true;
              });
              alert(found);
  
              if(found)
                  return false;
  
              return val === 'ALL' || $(el).text().indexOf('[' + val + ']') &gt;= 0;
          }).appendTo('#sourceCars');
          $("#targetCars option").attr("selected", "selected");
      });
  
      $('#sourceCars').dblclick(function() {
          $('#sourceCars option:selected').appendTo('#targetCars');
          $("#targetCars option").attr("selected", "selected");
      });
  
      $('#dbleMeRight').click(function() {
          $('#sourceCars option:selected').appendTo('#targetCars');
          $("#targetCars option").attr("selected", "selected");
      });
  
      $('#targetCars').dblclick(function() {
  
          var targetList=$('#targetCars option:selected');
          var filterVal= $('#filterDis').val();
          if( filterVal === 'ALL' || targetList.text().indexOf('[' + filterVal + ']') &gt;= 0)
              targetList.appendTo('#sourceCars');
          else
              targetList.remove();
          var foption = $('#sourceCars option:first');
          var soptions = $.makeArray($('#sourceCars option:not(:first)')).sort(function(a, b) {
              return a.text == b.text ? 0 : a.text &amp;lt; b.text ? -1 : 1
          });
          $('#sourceCars').html(soptions).prepend(foption);
          foption.attr("selected", true).siblings("option").removeAttr("selected");
          $("#targetCars option").attr("selected", "selected");
      });
  
      $('#dbleMeLeft').click(function() {
  
          var targetList=$('#targetCars option:selected');
          var filterVal= $('#filterDis').val();
          if( filterVal === 'ALL' || targetList.text().indexOf('[' + filterVal + ']') &gt;= 0)
              targetList.appendTo('#sourceCars');
          else
              targetList.remove();
          var foption = $('#sourceCars option:first');
          var soptions = $.makeArray($('#sourceCars option:not(:first)')).sort(function(a, b) {
              return a.text == b.text ? 0 : a.text &amp;lt; b.text ? -1 : 1
          });
          $('#sourceCars').html(soptions).prepend(foption);
          foption.attr("selected", true).siblings("option").removeAttr("selected");
          $("#targetCars option").attr("selected", "selected");
      });
  
  });
  </code></pre>
  
  <p><em><strong>NOTE: If I move item from List B (Right) to List A (left), it works fine. BUT WHEN I move item from List A (Left) to List B (right), I get this error.</em></strong></p>
  
  <hr>