嵌套 JSF 复合组件中的 AJAX

Question

我在使用 Mojarra 2.0.3 和 PrimeFaces 的嵌套复合组件中正确触发 AJAX 调用时遇到了一些麻烦。

子复合组件看起来像这样：

<cc:interface componentType="therapy">
    <cc:attribute name="therapyType" type="java.lang.String" required="true"/>
    <cc:attribute name="patientId" type="java.lang.String" required="true"/>
    <cc:attribute name="showHistory" type="java.lang.Boolean" required="false" default="true"/>
    <cc:attribute name="width" type="java.lang.String" required="false" default="350px"/>
    <cc:attribute name="maxHistory" type="java.lang.String" required="false" default="3"/>
    <cc:attribute name="collectDoctor" type="java.lang.Boolean" required="false" default="false"/>
    <cc:attribute name="collectCareDate" type="java.lang.Boolean" required="false" default="false"/>
    <cc:attribute name="important" type="java.lang.Boolean" requred="false" default="false"/>
</cc:interface>

<cc:implementation>

    <script>
        function #{cc.clientId}Toggle(){
            $("##{cc.clientId}_newbutton").toggle();
            $("##{cc.clientId}_savebuttons").toggle();

            if(#{cc.attrs.collectDoctor}){
                $("##{cc.clientId}_doctor").toggle();
            }

            if(#{cc.attrs.collectCareDate}){
                $("##{cc.clientId}_care").toggle();
            }

            $("##{cc.clientId}_newTherapy").toggle(50);
        }

        function #{cc.clientId}rowHighlight(event){
            if(event.status == 'begin'){
                $("##{cc.clientId}_loader").toggle();
            }
            if(event.status == 'success'){
                $("##{cc.clientId}\\:histTable tr:eq(1)").effect("highlight", {color:"#FED17A", easing:"easeInCubic"}, 2000);
            }
        }

        $(function(){
            if(#{cc.attrs.important}){
                $("div[class~='ui-panel-titlebar'][id^='#{cc.clientId}']").css("background", "#FED17A");
            }
        });
    </script>

    <h:form prependId="false">
        <p:panel styleClass="mcoPanel" style="width:#{cc.attrs.width};">
                <f:facet name="header">
                    <h:panelGroup>
                        <span id="#{cc.clientId}_title">#{cc.myType.word}</span>
                        <span id="#{cc.clientId}_newbutton" class="mcoPanel-controls">
                            <span onclick="#{cc.clientId}Toggle();">
                                <h:graphicImage name="page_new.gif" library="images"/>
                            </span>
                        </span>
                        <span id="#{cc.clientId}_savebuttons" class="mcoPanel-controls" style="display:none;">
                            <span id="#{cc.clientId}_loader" style="display:none;">
                                <h:graphicImage name="ajax-loader.gif" library="images" height="16" width="16"/>
                            </span>
                            <h:commandLink action="#{cc.saveNewTherapy}">
                                <f:ajax execute="newOnTherapy newExemption newDoctor newCareDate" render="@form" onevent="#{cc.clientId}rowHighlight"/>
                                <h:graphicImage name="action_save.gif" library="images"/>
                            </h:commandLink>
                            <span onclick="#{cc.clientId}Toggle();">
                                <h:graphicImage name="page_cross.gif" library="images"/>
                            </span>
                        </span>
                    </h:panelGroup>
            </f:facet>
            <div id="#{cc.clientId}_newTherapy" class="mcoPanel-new" style="display:none;">
                <h:outputLabel for="newOnTherapy" value="Satisfied:" style="position:relative; top: -10px;"/>
                <p:selectOneMenu id="newOnTherapy" label="Satisfied" value="#{cc.newOnTherapyValue}" style="width: 60px;">
                    <f:selectItem itemLabel=""/>
                    <f:selectItems value="#{cc.yesNoList}"/>
                </p:selectOneMenu>
                <br/>
                <h:outputLabel for="newExemption" value="Exemption:" style="position:relative; top: -10px;"/>
                <p:selectOneMenu id="newExemption" value="#{cc.newExemption}" style="width: 150px;">
                    <f:selectItems value="#{cc.exemptions}"/>
                </p:selectOneMenu>
                <span id="#{cc.clientId}_doctor" style="display:none">
                    <br/>
                    <h:outputLabel for="newDoctor" value="Doctor:"/>
                    <p:inputText id="newDoctor" value="#{cc.newDoctor}"/>
                </span>
                <span id="#{cc.clientId}_care" style="display:none">
                    <br/>
                    <h:outputLabel for="newCareDate" value="Care Date:"/>
                    <p:calendar id="newCareDate" label="Care Date" value="#{cc.newCareDate}" showButtonPanel="true">
                        <f:converter converterId="dateOfBirthConverter"/>
                    </p:calendar>
                </span>
            </div>
            <h:messages id="#{cc.clientId}_messages" errorClass="errorMessage"/>
            <p:dataTable id="histTable" value="#{cc.history}" var="item" rendered="#{cc.attrs.showHistory}">
                <!-- Table Output -->
            </p:dataTable>
        </p:panel>
    </h:form>

父复合组件看起来像这样：

<cc:interface>
    <cc:attribute name="title" type="java.lang.String" required="true"/>
</cc:interface>

<cc:implementation>

    <h:outputScript name="containerpanel.js" library="js/components" target="head"/>

    <p:panel toggleable="true" styleClass="contentPanel" toggleSpeed="500" style="width:1100px;">
        <f:facet name="header">
            #{cc.attrs.title}
            <div class="ui-panel-titlebar-icon ui-corner-all ui-state-default contentSaveAll">
                Save All
            </div>
            <div class="ui-panel-titlebar-icon ui-corner-all ui-state-default contentExpandAll">
                ++
            </div>
            <div class="ui-panel-titlebar-icon ui-corner-all ui-state-default contentCollapseAll">
                - -
            </div>
        </f:facet>

        <cc:insertChildren>
                     <!-- Child components go here -->
        </cc:insertChildren>

    </p:panel>

</cc:implementation>

该实现应该允许容器组件内有任意数量的子组件。

如果将子组件放置在 Container 组件之外的页面上，则子组件会发送 ajax 请求并完美地更新其内部组件。另外，如果我使用容器的相同结构，但不是真正的复合组件，一切正常。

一旦我将子组件放置为 Container 组件的子组件，事情就会变得不稳定。子组件中没有 ajax 调用正确触发（即保存 commandLink）使用 firebug 帮助调试，我已经能够确定以下内容：

• 似乎正在发送 ajax 发布请求。 "begin" onevent 正在触发，在 firebug 中查看控制台会显示正在向服务器发送一个帖子，并发送回正确的组件 ID 和值。
• 未调用支持 bean 中的操作。我有一个打印语句作为第一行，它没有打印。
• ajax 请求似乎正在正确完成，“成功”onevent 正在触发。
• 页面上没有更新任何内容。表单不会刷新，页面顶部的 p:messages 对象也不会刷新。

显然，我可以在没有 Container 组件的情况下做到这一点，但我当然更希望能够利用代码重用。我是否在这里遗漏了一些明显的东西，我需要做些什么才能让 ajax 正常工作？

Answer 1

我在使用 MyFaces 2.1.6 时遇到了完全相同的问题。 我无法使用 CC 界面中的 ClientBehavior 从嵌套的复合组件进行 AJAX 调用。

就像moneyT 写的那样，服务器被通知了ajax 标记中指定的事件，但是当生命周期进入第5 阶段- 调用应用程序时，事件为空并且没有调用任何侦听器。它越来越像 MyFaces 实现中的一个错误。

编辑：我找到了另一种解决方案，它比在复合组件中硬编码 ajax 好得多。我已将外部复合组件重构为 facelet。它失去了复合材料的一些怪癖，但它完成了工作。它还可以重复使用。

我发现的唯一解决方案（与其说是解决方案，不如说是一种解决方案）是在复合组件中硬编码 ajax，而不是使用 ClientBehavior，如下所示：

   <composite:implementation>            
       <h:panelGroup layout="block" id="listBox" class="list-box-scroll-pane" style="height:#{cc.attrs.visibleLines*27 + 5}px; width:#{cc.attrs.width}px">
        <h:inputText id="submit-value" style="visibility: hidden; width:0px; height: 0px;" value="#{cc.attrs.property}">
                 <f:ajax event="change"
                  render="carModel"
                  listener="#{carDetailsMediator.changeCarMake}" 
                  onevent="initComboboxes"/>
        </h:inputText>
        <ui:repeat value="#{cc.attrs.items}" var="element" varStatus="loop">
            <input id="input-#{cc.attrs.customId}-#{loop.index}" type="hidden" 
                            value="#{element.value}" />
            <div id="div-#{cc.attrs.customId}-#{loop.index}" class="list-box-row">#{element.label}</div>
        </ui:repeat>    

        </h:panelGroup>
    </composite:implementation>

但是这种解决方法不是很好，因为复合组件背后的想法是您可以通过许多不同的选项重用它们。硬编码 ajax 有点限制选项。

Answer 2

我相信你的问题是这样的：

<f:ajax execute="newOnTherapy newExemption newDoctor newCareDate" ...

execute 属性可以引用特殊关键字（例如@this、@form 等...）或根据文档：

如果指定了文字，则它必须是由空格分隔的组件标识符和/或关键字之一的字符串。

当您将此组件作为子组件插入到父组件时，组件 ID 将由动态确定，不能绝对引用。