Primefaces p: picklist - как я фиксирую событие выбора элемента в целевом списке?

Question

Я хотел бы повторно отобразить компонент, когда пользователь из списка целевого списка выбора выбирает элемент.

Как это сделать?

---

UPDATE (17 декабря 2013)

Я описал полное решение этой проблемы здесь - http://leonotepad.blogspot.com.br/2013/12/primefaces-capturing-target-list-item.html

Благодаря @Hatem я не мог решить эту проблему без вашего ответа.

В принципе, это было так:

У меня есть @ViewScoped управляемый компонент с р: PickList отфильтрованный по р: компонент SelectMany с помощью р: Ajax события обновления.

Как это

<p:outputLabel for="siteFilter" value="Site Filter:" style="width:100px;"/> 
<p:selectOneMenu converter="#{siteTypeConverter}" id="siteFilter" value="#{myMB.selectedSiteType}" style="width:200px;">    
    <f:selectItem itemLabel="Select Site Type" itemValue="#{null}" /> 
    <f:selectItems value="#{myMB.siteTypeFilterList}" var="st" itemLabel="#{st.name}" itemValue="#{st}" /> 
    <p:ajax update="sites" listener="#{myMB.handleSiteTypeFilterChange}" oncomplete="rebindClicks()"/> 
</p:selectOneMenu> 

<p:outputLabel for="sites" value="Sites:" style="width:100px;"/> 
<p:pickList 
    widgetVar="xyzabc" 
    id="sites" 
    value="#{myMB.sites}" 
    var="site"     
    converter="#{siteConverter}" 
    itemLabel="#{site.siteType.name}.#{site.name}" 
    itemValue="#{site}" /> 

Идея заключается в том, чтобы вызвать новое событие, когда пользователь нажимает на каком-то PickList целевого элемента списка.

Итак, как было предложено @Hatem, мы должны привязать событие click к каждому из целевых элементов. Нравится

(...) 
    <p:remoteCommand name="updateCommand" action="#{myMB.updateAccounts}" update="accounts"/> 
</h:form> 
<h:outputScript library="js" name="pickListHack.js" /> 
(...) 

Обратите внимание, что я должен был добавить его ПОСЛЕ формы.

и pickListHack.js расположен на WebContent/ресурсы/JS/pickListHack.js

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(); 
}); 

Хитрость здесь, кажется, что после события обновления, оков теряются, поэтому мы должны пересвязать их после обновления. Вот почему p: ajax имеет это незавершенное событие.

И наконец, когда пользователь нажимает на элемент из целевого списка, мы вызываем updateCommand, объявляемый через p: remoteCommand.

Обратите внимание, что выбранный элемент передается как параметр с именем «param». Мы получаем этот параметр обратно в управляемом компоненте, как этот

public void updateAccounts(){ 
    String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param"); 
    System.out.println(">"+value); 
    this.accounts = value; 
} 

В этом случае значение только ID, потому что это то, что мой siteConverter делает к объекту.

@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; 
     } 
    } 
} 

Answer 1

Этот способ должен это сделать.

remoteCommand

<p:remoteCommand name="updateCommand" update="componentId" /> 

р: Picklist

<p:pickList id="pickList" widgetVar="pickListVar" value="#{pickListBean.cities}" 
var="city" itemLabel="#{city}" itemValue="#{city}" /> 

JS

$(document).ready(function() { 
    PF('pickListVar').jq.on('click','.ui-picklist-target li',function(){ 
     updateCommand();//remoteCommand to update 
     //and you can get the item value and lable 
     $(this).attr('data-item-value'); 
     $(this).attr('data-item-lable'); 
    }); 
}); 

EDIT:

И если ваш pickList регулярно обновляется другим компонентом, вы потеряете событие click в конце концов.

В этом случае вы можете привязать клик к родительскому компоненту-контейнеру pickList.

Например:

$('#formId').on('click','.ui-picklist-target li',function(){ 
     updateCommand();//remoteCommand to update 
     //and you can get the item value and lable 
     $(this).attr('data-item-value'); 
     $(this).attr('data-item-lable'); 
    }); 

Но опять-таки, если какой-либо другой компонент, обновил всю форму, вы потеряете событие связывания ..