无法从复合组件内的 f:ajax 调用侦听器方法

Question

这是我的复合组件hc:rangeChooser：

<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:cc="http://java.sun.com/jsf/composite"
              xmlns:p="http://primefaces.org/ui">
    <cc:interface componentType="rangeChooser">
        <cc:clientBehavior name="rangeSelected" event="change" targets="#{cc.clientId}:datetype"/>
    </cc:interface>

    <cc:implementation>

        <div id="#{cc.clientId}">
            <h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
            <h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />
            <h:outputScript library="javascript" name="rangeChooser.js" />
            <h:outputStylesheet library="primefaces" name="primefaces.css" target="head" />
            <h:outputStylesheet library="primefaces" name="jquery/ui/jquery-ui.css" target="head"/>

            <script type="text/javascript">
                var variables = {};
                variables.formid = '#{cc.clientId}';
            </script>

            <h:selectOneMenu id="datetype" value="#{cc.attrs.selectedRange}" onchange="dateFunc();">
                <f:selectItems value="#{cc.attrs.ranges}"></f:selectItems>
            </h:selectOneMenu>

            ....

            <p:inputText id="hiddenValue" value="#{cc.attrs.range}"/>
        </div>
    </cc:implementation>
</ui:component>

当我在<h:selectOneMenu> 中选择某些内容时，我会运行dateFunc();，它将从中选择的值传递给<h:inputText>，以后它将被隐藏。

现在，这是我使用此组件的一种方式：

<h:form id="form">
    <p:growl id="growl"></p:growl>
    <hc:rangeChooser1>
        <f:ajax event="rangeSelected"
                onevent="alert('It works');"
                listener="#{testBean.update}" 
                update=":form:growl"/>
    </hc:rangeChooser1>
</h:form>

最后是我的 backing bean 的方法：

public void update(AjaxBehaviorEvent e){
    SimpleDateFormat df = new SimpleDateFormat("dd MMM yyyy");
    text = df.format(from.getTime()) + " " + df.format(to.getTime());
     FacesContext context = FacesContext.getCurrentInstance();

     context.addMessage(null, new FacesMessage("Successful" + text,  "Your message: " + text) );
     context.addMessage(null, new FacesMessage("Second Message", "Additional Message Detail"));
}

当我更改选择时，一切正常，除了 <f:ajax> 不调用 testBean 的更新 method，但它调用函数 alert('it works');

当我使用<p:remoteCommand> 时，我可以从<f:ajax onevent="myRemote"> 调用然后定义

<p:remoteCommand name="myRemote" actionListener="#{testBean.update}" 
                 update="growl"/>

但我不喜欢这个解决方案，也不明白为什么我的方法不起作用。

Answer 1

首先，

<cc:clientBehavior ... targets="#{cc.clientId}:datetype" />

targets 属性的值错误。它是相对于<cc:implementation> 进行解释的，但是#{cc.clientId} 错误地期望它相对于其NamingContainer 父级进行解释。去掉 #{cc.clientId}: 前缀。

<cc:clientBehavior ... targets="datetype" />

不要忘记通知作者您发现此错误信息的来源。这不是我第一次看到初学者使用这个，所以互联网上肯定有一些来源在传播这种错误信息，应该被告知。

其次，

<f:ajax ... update=":form:growl" />

<f:ajax> 不支持 update 属性。这是 PrimeFaces 特有的。您可能打算使用render。

<f:ajax ... render=":form:growl" />

---

与具体问题无关：<f:ajax onevent="alert('It works');"> 无法正常工作，因为不支持此构造。 onevent 属性的值应该代表函数引用的名称，而不是函数调用。因此，要么这是一种错误的观察，要么是您在没有实际测试的情况下过度简化/假设了太多。