ajax - JSF - 在 ajax 调用后加载/插入不同的 div

Question

我认为这个话题解释了我在寻找什么:
template.xhtml

<div class="content">
    <ui:insert name="content_homepage">Box Content Here</ui:insert>
</div>

index.xhtml

<ui:composition template="./template.xhtml">
    <ui:define name="title">
        JSF - The Sinfonet Portal
    </ui:define>

    <ui:define name="login">
        <h:form id="form1" prependId="false">
            <h:outputScript name="jsf.js" library="javax.faces" target="head" />

            <span class="menu_span">Username</span>
            <h:inputText value="#{login.name}" id="name" />

            <span class="menu_span">
                <h:commandButton value="Login" action="#{login.checkLogin}">
                        <f:ajax event="action" execute="name" render="??????"/>
                </h:commandButton>                    
            </span>
        </h:form>
    </ui:define>

    <ui:define name="content_homepage">
        <span class="content_title">Homepage</span>
    </ui:define>

    <ui:define name="content_logged">
        <span class="content_title">OK. You are logged</span>
    </ui:define>
</ui:composition>

托管bean

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="login")
@RequestScoped
public class Login {
    private String name = "";

    public String getName() { return name; }
    public void setName(String newValue) { name = newValue; }

    public boolean checkLogin() {
        if(name.length()==0) {
            return true;
        } else {
            return false;
        }
    }   
}  

通过使用模板定义，我插入了 content_homepage作为第一内容。之后，当我执行 ajax 调用时，如果名称不为空，我将加载 content_login .是否可以在 JSF 上执行此操作？

干杯

Answer 1

您需要将 Facelets( View /模板技术)和 JSF(基于组件的 MVC 框架)的概念分开。自 Facelets 以来，仅使用 Facelets 无法满足您的需求 ui标签仅是服务器端，不会向客户端发出任何内容。您需要引入一个 JSF 组件(在最后生成 HTML)，它可以由客户端的 JS/Ajax 定位。
template.xhtml

<h:panelGroup layout="block" id="content">
    <ui:insert name="content_homepage">Box Content Here</ui:insert>
</h:panelGroup>

( layout="block" 使它成为 <div> 而不是 <span> )
index.html按钮:

            <h:commandButton value="Login" action="#{login.checkLogin}">
                <f:ajax execute="@form" render=":content" />
            </h:commandButton>

( :content 指的是 <h:panelGroup id="content">，它位于 : 上层)
index.html的内容模板定义:

<ui:define name="content_homepage">
    <h:panelGroup rendered="#{!login.loggedIn}">
        User is not logged in.
    </h:panelGroup>
    <h:panelGroup rendered="#{login.loggedIn}">
        User is logged in.
    </h:panelGroup>
</ui:define>

托管 bean :

private String name; // Do NOT initialize with empty string! Poor practice.

// ...

public boolean isLoggedIn() { // Boolean getter methods should be prefixed with `is`.
    return name != null; // Do NOT add if/else verbosity for something which already returns boolean! Poor practice.
} 

此外，不要使用跨度作为标签。这是糟糕的 HTML 语义。使用 <h:outputLabel> (或纯 HTML <label> )。