title: Primefaces p:picklist - how I capture the event of selecting an item in the target list?
body: <p>I'd like to re-render a component when a item from the picklist target list is selected by the user.</p>
  
  <p>How do I do that?</p>
  
  <hr>
  
  <p>UPDATE (December 17th, 2013)</p>
  
  <p>I've described the full solution for this problem here  - <a href="http://leonotepad.blogspot.com.br/2013/12/primefaces-capturing-target-list-item.html" rel="nofollow">http://leonotepad.blogspot.com.br/2013/12/primefaces-capturing-target-list-item.html</a></p>
  
  <p>Thanks @Hatem I could not solve this without your answer.</p>
  
  <p>Basically, it was this:</p>
  
  <p>I have a @ViewScoped managed bean with a p:pickList filtered by a p:selectMany component using a p:ajax update event.</p>
  
  <p>Like this</p>
  
  <pre><code>&lt;p:outputLabel for="siteFilter" value="Site Filter:" style="width:100px;"/&gt;
  &lt;p:selectOneMenu converter="#{siteTypeConverter}" id="siteFilter" value="#{myMB.selectedSiteType}" style="width:200px;"&gt;              
     &lt;f:selectItem itemLabel="Select Site Type" itemValue="#{null}" /&gt;
     &lt;f:selectItems value="#{myMB.siteTypeFilterList}" var="st" itemLabel="#{st.name}" itemValue="#{st}" /&gt;
     &lt;p:ajax update="sites" listener="#{myMB.handleSiteTypeFilterChange}" oncomplete="rebindClicks()"/&gt;
  &lt;/p:selectOneMenu&gt;
  
  &lt;p:outputLabel for="sites" value="Sites:" style="width:100px;"/&gt;
  &lt;p:pickList
     widgetVar="xyzabc"
     id="sites"
     value="#{myMB.sites}"
     var="site"                 
     converter="#{siteConverter}"
     itemLabel="#{site.siteType.name}.#{site.name}"
     itemValue="#{site}" /&gt; 
  </code></pre>
  
  <p>The idea here is to trigger a new event when the user clicks on some pickList target list item.</p>
  
  <p>So, as suggested by @Hatem, we have to bind the click event to each one of the target elements. Like this</p>
  
  <pre><code>(...)
     &lt;p:remoteCommand name="updateCommand" action="#{myMB.updateAccounts}" update="accounts"/&gt;
  &lt;/h:form&gt;
  &lt;h:outputScript library="js" name="pickListHack.js" /&gt;   
  (...)
  </code></pre>
  
  <p>Notice that I had to add it AFTER the form.</p>
  
  <p>and pickListHack.js is located at WebContent/resources/js/pickListHack.js</p>
  
  <pre><code>function rebindClicks() {
      xyzabc.jq.on('click','.ui-picklist-target li',function(){
          var item = $(this).attr('data-item-value');
          alert(item);
          updateCommand([{name:'param', value:item}]);
     });
  };
  
  $(document).ready(function() {
      rebindClicks();
  });
  </code></pre>
  
  <p>The trick here seems to be that, after the update event, the binds are lost, so we have to rebind them after the update. That's  why p:ajax has that oncomplete event.</p>
  
  <p>Finally, when the user clicks on the element from the target list, we call the updateCommand, declared via p:remoteCommand.</p>
  
  <p>Notice that the selected item is passed as a parameter called "param". We get this parameter back in the managed bean like this</p>
  
  <pre><code>public void updateAccounts(){
     String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
     System.out.println("&gt;"+value);
     this.accounts = value;
  }
  </code></pre>
  
  <p>In this case, the value is just the ID, because that's what my siteConverter does to the object.</p>
  
  <pre><code>@ManagedBean
  @RequestScoped
  public class SiteConverter implements Converter,Serializable{
      private static final long serialVersionUID = -194442504109002565L;
  
      @EJB
      private MyEJB myEJB;
  
      @Override
      public Object getAsObject(FacesContext arg0, UIComponent arg1, String arg2)
              throws ConverterException {
  
          if (arg2 != null){
              Site s = myEJB.getSiteById(Long.parseLong(arg2));
              return s;
          }else{
              return null;
          }
      }
  
      @Override
      public String getAsString(FacesContext arg0, UIComponent arg1, Object arg2)
              throws ConverterException {
  
          if (arg2 != null){
              Site s = (Site)arg2;
              return String.valueOf(s.getId());
          }else{
              return null;
          }
      }
  }
  </code></pre>