Primefaces p:picklist - как мне записать событие выбора элемента в списке целей?

Question

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

Как я могу это сделать?

---

ОБНОВЛЕНИЕ (17 декабря 2013 г.)

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

Спасибо @Hatem Я не мог решить это без вашего ответа.

В основном это было так:

У меня есть управляемый bean-компонент @ViewScoped с a p:pickList, отфильтрованный компонентом ap: selectMany с помощью события обновления ap: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/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 имеет это незавершенное событие.

Наконец, когда пользователь нажимает на элемент из целевого списка, мы вызываем 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');
   });
});

РЕДАКТИРОВАТЬ:

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

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

Например:

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

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