4

我正在创建一个简单的页面，在单击一个按钮后，它将一个 panelGroup 替换为另一个。首先，代码：

<h:body>

    <ui:composition template="/elements/templateWithMenu.xhtml">           
        <ui:define name="content">
            <div class="rightContent">

                <h:panelGroup id="lol" rendered="#{test.firstStep.booleanValue()}">

                    <h3>This should disappear</h3>

                    <h:form id="newPollForm1" rendered="#{test.firstStep.booleanValue()}"> 
                        <fieldset>
                            <h:commandLink value="Next" action="#{test.firstStepCompleted()}" >
                                <f:ajax execute="@all" render="lol" />
                            </h:commandLink>
                        </fieldset>
                    </h:form>

                </h:panelGroup>

                <h:panelGroup rendered="#{test.secondStep.booleanValue()}">
                    Works!
                </h:panelGroup>

            </div>     
        </ui:define>
    </ui:composition>

</h:body>

支持 bean 只是将 firstStep 设置为 false，将 secondStep 设置为 true。

现在，当我尝试运行它时，我得到了<f:ajax> contains an unknown id 'lol' - cannot locate it in the context of the component j_idt39. 谷歌搜索了一下，我发现对于表单范围之外的元素，我需要使用 SEPARATOR_CHAR (:)。那没有用。所以我尝试弄乱#{component}和#{cc}的不同组合，但没有任何效果。我什至找到了这个很棒的解释，但我又一次惨败。如果我使用@all，一切正常（一个面板被另一个面板替换），但我确实需要渲染一个特定的组件。

帮助？请？

4

1 回答 1

5

您需要改为更新公共父<div class="rightContent">级。这个总是被渲染的，因此保证了 JavaScript/Ajax 可以访问和维护它的孩子。替换它<h:panelGroup layout="block">并给它一个id.

<h:panelGroup layout="block" id="content" class="rightContent">
    <h:panelGroup rendered="#{test.firstStep}">
        <h3>This should disappear</h3>
        <h:form id="newPollForm1"> 
            <fieldset>
                <h:commandLink value="Next" action="#{test.firstStepCompleted()}" >
                    <f:ajax execute="@form" render=":content" />
                </h:commandLink>
            </fieldset>
        </h:form>
    </h:panelGroup>

    <h:panelGroup rendered="#{test.secondStep}">
        Works!
    </h:panelGroup>
</h:panelGroup>

使用这个Test.java类：

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class Test {
    private int number = 0;

    public void firstStepCompleted() {
        number++;
    }

    public boolean isFirstStep() {
        return number == 0;
    }

    public boolean isSecondStep() {
        return number == 1;
    }
}

请注意，我删除了表单上多余的Boolean#booleanValue()调用和重复的renderedcontition。

如果这仍然不起作用，那么/elements/templateWithMenu.xhtml显然包含另一个命名容器组件，该组件已预先添加其 ID。对于还没有记住所有命名容器组件的初学者，一个简单的方法来计算真正正确的客户端 ID 是在浏览器中打开页面，右键单击并查看源代码，然后找到 JSF 生成的 HTML 元素并准确获取其id属性值（并:在 中加上前缀<f:ajax render>）。

于 2012-05-29T17:32:21.543 回答