simulate onclick event picklist primefaces

Question

I know that the primefaces picklist only alows transfer event like

<p:ajax event="transfer" listener="#{bean.onTransfer}" />

But I am looking for an onTargetSelected event. Is there a way to simulate it?

I thought about a JQuery function bound with a click event but I don't know on which element. I saw that when I select a line in the target list, the class of the li is transforming to ui-state-highlight. Is there a way to detect class changing with JQuery?

To call a bean method when the event will be fired, I thought about primefaces remoteCommand to send the ID of my object.

Do you have an idea about this event?

Note: I saw that there is a select with the target values in the source code but the selected value is 'selected' for each item and I don't know if there is something to do with this.

Thanks for your help

Answer 1

I have a trick. I am using this JQuery function :

$(document).ready(function(){
    $('.ui-picklist-target .ui-picklist-item td').click(function() {
        var id = $(this).closest("li").attr("data-item-value");
        $('[id$=selectedItemId]').val(id); // Setting the value of my hidden input
        updateSelectedTarget(); // Calling the remoteCommand function
    });
});

I have added this to my xhtml page

<h:form>
    ...
    <p:pickList ...>

    </p:pickList>

    <h:inputHidden id="selectedItemId" value="#{modifierUOBean.selectedTargetId}"/>
    <p:remoteCommand name="updateSelectedTarget" actionListener="#{modifierUOBean.onSelectedTarget}"/>
</h:form>

And the bean:

private int selectedTargetId; // and getters and setters

public void onSelectedTarget() {
    // Do what you want with selectedTargetId which contains the id of selected item
}