Primefaces p：picklist-如何捕獲在目標列表中選擇項目的事件？

Question

當用戶從選擇列表目標列表中選擇一項時，我想重新渲染組件。

我怎么做？

---

更新（2013年12月17日）

我已經在此處描述了此問題的完整解決方案-http://leonotepad.blogspot.com.br/2013/12/primefaces-capturing-target-list-item.html

謝謝@Hatem，如果沒有您的回答，我將無法解決。

基本上是這樣的：

我有一個@ViewScoped托管bean，其中使用ap：ajax更新事件通過ap：selectMany組件過濾了ap：pickList。

像這樣

<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 / resources / 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具有該oncomplete事件。

最后，當用戶單擊目標列表中的元素時，我們調用通過p：remoteCommand聲明的updateCommand。

請注意，所選項目作為名為“ param”的參數傳遞。 我們像這樣在托管bean中獲取此參數

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

編輯：

而且，如果您的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');
   });

但是，如果任何其他組件更新了整個表單，則同樣會丟失事件綁定。