1

When we select an option of a primefaces selectCheckboxMenu using scroll down, after change listener, the component is updated and scroll go to the up and this behavior seems wrong.

This is my code:

XHTML

<p:outputLabel for="profCat" value="Professional Category" />

<p:selectCheckboxMenu id="profCat" widgetVar="profCatW" 
    scrollHeight="175"
    label="#{employeeForm.profCat.label}"
    value="#{employeeForm.profCat.selectedItemIds}">

    <p:ajax event="toggleSelect" update="profCat"
        listener="#{employeeForm.profCat.populateLabel}"
        oncomplete="PF('profCatW').show()" />
    <p:ajax event="change" update="profCat"
        listener="#{employeeForm.profCat.populateLabel}"
        oncomplete="PF('profCatW').show()" />
    <f:selectItems value="#{employeeForm.profCat.items}" var="label" 
        itemLabel="#{label.label}" itemValue="#{label.optionId}" />
</p:selectCheckboxMenu>

<p:message for="profCat" />

Java Listener

public void populateLabel() {
        label = (selectedItemIds != null && selectedItemIds.size() > 0)
                ? selectedItemIds.size() + " selected." : "Select";
}

The java listener change label value but we need to update the selectCheckboxMenu to refresh the label of this combo.

Anybody know any solution to solve?

  1. Javascript scroll re-position after update
  2. Any way to avoid to refresh scroll?
  3. Any way to update combo label without update component?
  4. Other component of other JSF library?

My B plan is update from Java code the text of associated outputLabel to avoid this behavior.

Thank you so much in advance!

Regards

carlosyague
  • 71
  • 5
  • update it client-side? So remove the update of the component and on the oncomplete count the number of selected items client-side (maybe the component has a javascript api for this) and update the label via javascript – Kukeltje Jul 29 '16 at 10:34
  • Thank you @Kukeltje ! I have found the way to do this with javascript. – carlosyague Jul 29 '16 at 12:07

1 Answers1

2

Finally, I solved this problem with the help of @Kukeltje.

I defined this javascript function:

function populateLabel(widgetVar) {
      var count = PF(widgetVar).inputs.filter(":checked").length;

      var label = count + " selected";      
      PF(widgetVar).jq.find('.ui-selectcheckboxmenu-label').text(label);
}

And in my JSF code I removed updates on ajax listeners:

<p:ajax event="toggleSelect"
    listener="#{employeeForm.profCat.populateLabel}"
    oncomplete="populateLabel('profCatW')" />
<p:ajax event="change" 
    listener="#{employeeForm.profCat.populateLabel}"
    oncomplete="populateLabel('profCatW')" />

To consider case of error during validation:

<h:outputScript rendered="#{facesContext.validationFailed}">
   populateLabel('profCatW');
</h:outputScript>
carlosyague
  • 71
  • 5
  • Does this work for you when you deselect an item? For me this only seems to work if I select items. – jansohn Oct 24 '17 at 10:45
  • It's a specific bug in version 6.1.5 (https://github.com/primefaces/primefaces/issues/2734)... – jansohn Oct 25 '17 at 08:25