Question

在我的JSF视图中，我有一个p:selectCheckboxMenu，我希望通过AJAX对所选值执行一些业务逻辑。

对于简单的change事件，它可以正常工作，但对于toggleSelect事件则不行。在我的监听器方法中，我正在检索旧的选择，但我期待这里的新选择。

请参阅以下示例：

@ViewScoped
@Named
public class RequestBean implements Serializable {
    private List<String> list; // + getter/setter

    @PostConstruct
    private void init() {       
        list = new ArrayList<String>() {{
          add("one");  add("two"); add("three");
        }};
    }

    public void listener() {
        System.out.println("Current content of \"list\":");
        for(String s : list) {
            System.out.println(s);
        }
    }
}

在JSF视图中

：

<p:selectCheckboxMenu value="#{requestBean.list}" label="List">
    <f:selectItem itemValue="one" itemLabel="one"/>
    <f:selectItem itemValue="two" itemLabel="two"/>
    <f:selectItem itemValue="three" itemLabel="three"/>
    <p:ajax event="toggleSelect" listener="#{requestBean.listener}"  />
    <p:ajax event="change" listener="#{requestBean.listener}" />
</p:selectCheckboxMenu>

现在让我们考虑以下用例：您正在进入视图，选择“一个”和“两个”。如果我单击“全选”复选框，结果为：

Info:   Current content of "list":
Info:   one
Info:   two

但预期结果如下：

Info:   Current content of "list":
Info:   one
Info:   two
Info:   three

对于常规更改事件，它按预期工作。在这里，我在听众中获得了新的选择。我该如何解决？或者我做错了什么？

GlassFish 4.1，在Java 1.8.0_45上运行

JSF 2.2.10（Mojarra）

PrimeFaces 5.1

OmniFaces 1.8.1

Answer 1

此问题似乎与过早调用的侦听器有关。做一些基本的调试，我发现toggleSelect在更新模型值之前调用了listener方法，而change事件在修改它们之后就这样做了。那是我现在的代码：

<强> RequestBean：

@ViewScoped
@ManagedBean
public class RequestBean implements Serializable {
    public List<String> getList() {
        return list;
    }

    public void setList(List<String> list) {
        this.list = list;
        System.out.println("Values set: " + list);
    }

    private List<String> list;

    @PostConstruct
    private void init() {
        list = new ArrayList<String>() {
            {
                add("one");
                add("two");
                add("three");
            }
        };
    }

    public void listener() {
        System.out.println("Listener called!");
    }
}

<强> page.xhtml：

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:comp="http://java.sun.com/jsf/composite/comp"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head />
<h:body>
    <h:form>
        <p:selectCheckboxMenu value="#{requestBean.list}" label="List">
            <f:selectItem itemValue="one" itemLabel="one" />
            <f:selectItem itemValue="two" itemLabel="two" />
            <f:selectItem itemValue="three" itemLabel="three" />
            <p:ajax event="toggleSelect" listener="#{requestBean.listener}" />
            <p:ajax event="change" listener="#{requestBean.listener}" />
        </p:selectCheckboxMenu>
    </h:form>
</h:body>
</html>

这是您当前步骤的痕迹：

Values set: [one]
Listener called!
Values set: [one, two]
Listener called!
Listener called!
Values set: [one, two, three]

最后一个是toogle选择，因为您可以看到模型已正确更新，但之前调用了侦听器。

让我们使用自定义PhaseListener：

进行更多播放

Entering RESTORE_VIEW 1
Entering APPLY_REQUEST_VALUES 2
Entering PROCESS_VALIDATIONS 3
Entering UPDATE_MODEL_VALUES 4
Values set: [one]
Entering INVOKE_APPLICATION 5
Listener called!
Entering RENDER_RESPONSE 6
Entering RESTORE_VIEW 1
Entering APPLY_REQUEST_VALUES 2
Entering PROCESS_VALIDATIONS 3
Entering UPDATE_MODEL_VALUES 4
Values set: [one, two]
Entering INVOKE_APPLICATION 5
Listener called!
Entering RENDER_RESPONSE 6
Entering RESTORE_VIEW 1
Entering APPLY_REQUEST_VALUES 2
Listener called!
Entering PROCESS_VALIDATIONS 3
Entering UPDATE_MODEL_VALUES 4
Values set: [one, two, three]
Entering INVOKE_APPLICATION 5
Entering RENDER_RESPONSE 6

如您所见，模型值始终在UPDATE_MODEL_VALUES阶段设置，而change事件在INVOKE_APPLICATION中执行，toggleSelect侦听器执行APPLY_REQUEST_VALUES，在列表之前。

这似乎是一个Primefaces错误，应该在their GitHub branch中通知。

另见：

How to implement a PhaseListener which runs at end of lifecycle?

Answer 2

在JSF生命周期的第二阶段触发侦听器：应用请求值。模型（requestBean.list）稍后在第四阶段更新模型值期间更新。这就是听众看到旧价值的原因。

BalusC发布了一个通用的解决方法in this answer，但由于PrimeFaces的组件包装和排队事件的方式，它会在这种情况下导致无限循环。所以我建议采用阶段监听方式。

查看

<f:view beforePhase="#{requestBean.beforePhase}"> <h:form id="form"> <p:selectCheckboxMenu id="list_menu" value="#{requestBean.list}" label="List"> <f:selectItem itemValue="one" itemLabel="one" /> <f:selectItem itemValue="two" itemLabel="two" /> <f:selectItem itemValue="three" itemLabel="three" />  <p:ajax event="toggleSelect" /> <p:ajax event="change" listener="#{requestBean.listener}" /> </p:selectCheckboxMenu> </h:form> </f:view>

<强>豆

public void beforePhase(PhaseEvent event) { if (event.getPhaseId() == PhaseId.INVOKE_APPLICATION) { Map<String, String> params = FacesContext.getCurrentInstance() .getExternalContext().getRequestParameterMap(); String eventName = params.get( Constants.RequestParams.PARTIAL_BEHAVIOR_EVENT_PARAM); String source = params.get("javax.faces.source"); if ("form-list_menu".equals(source) && "toggleSelect".equals(eventName)) { listener(); } } }

Answer 3

我偶然发现了另一种解决方法：基本上你需要在setter中为值填充标签文本。例如：

查看

<p:selectCheckboxMenu value="#{bean.selectedValues}" label="#{bean.selectedValuesDisplayString}" widgetVar="checkboxMenuWget"> <f:selectItems value="#{bean.allValues}"/> <p:ajax event="change" listener="#{bean.updateDisplayString()}" update="@widgetVar(checkboxMenuWget)" /> <p:ajax event="toggleSelect" update="@widgetVar(checkboxMenuWget)" /> </p:selectCheckboxMenu>

<强>豆

// Properties private List<String> allValues; private List<String> selectedValues; private String selectedValuesDisplayString; // Getters and Setters public void setSelectedValues(List<String> selectedValues) { this.selectedValues = selectedValues; updateDisplayString(); } // UI Code public void updateDisplayString() { this.selectedValuesDisplayString = // code to generate display string... }

Answer 4

我也遇到了这个问题。它仍然没有在PrimeFaces 5.2中修复。我的解决方案如何解决它：

添加到faces-config.xml

<component>
    <component-type>org.primefaces.component.SelectCheckboxMenu</component-type>
    <component-class>yourpackage.SelectCheckboxMenu</component-class>
</component>

创建此类：

public class SelectCheckboxMenu extends  org.primefaces.component.selectcheckboxmenu.SelectCheckboxMenu {
    @Override
    public void queueEvent(FacesEvent event) {
        FacesContext context = getFacesContext();
        String eventName = context.getExternalContext().getRequestParameterMap().get(Constants.RequestParams.PARTIAL_BEHAVIOR_EVENT_PARAM);

        if(event instanceof AjaxBehaviorEvent && eventName.equals("toggleSelect")) {
            Map<String,String> params = context.getExternalContext().getRequestParameterMap();
            String clientId = this.getClientId(context);
            boolean checked = Boolean.valueOf(params.get(clientId + "_checked"));

            // changed code
            ToggleSelectEvent toggleSelectEvent = new ToggleSelectEvent(this, ((AjaxBehaviorEvent) event).getBehavior(), checked);
            toggleSelectEvent.setPhaseId(event.getPhaseId());
            getParent().queueEvent(toggleSelectEvent);
            // end
        }
        else {
            super.queueEvent(event);
        }
    }

}

Answer 5

您可以对侦听器使用远程命令，如下所示。

<p:remoteCommand name="test" id="test" actionListener"#{requestBean.listener}" update="@form" process="@form"></p:remoteCommand>

在toggleselect

上按照以上方式调用

        <p:ajax event="toggleSelect" oncomplete="test();" />

Answer 6

面对同样的问题，经过一段时间的搜索，我发现您可以将更新逻辑绑定到onchange属性。像：

<p:selectCheckboxMenu value="#{requestBean.list}" label="List" onchange="#{requestBean.listener()}">
            <f:selectItem itemValue="one" itemLabel="one" />
            <f:selectItem itemValue="two" itemLabel="two" />
            <f:selectItem itemValue="three" itemLabel="three" />
            <p:ajax event="toggleSelect" listener="#{requestBean.listener}" />
            <p:ajax event="change" listener="#{requestBean.listener}" />
        </p:selectCheckboxMenu>

考虑：onchange="#{requestBean.listener()}"您必须使用大括号调用侦听器，否则会出现异常。

不知道您正在使用哪个PF版本，但我在this link中找到了解决方案。（PrimeFaces 5.3）

PrimeFaces selectCheckboxMenu：toggleSelect actionListener中的旧值

6 个答案: