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

我认为这个主题解释了我在寻找什么：

的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>

管理豆

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上执行此操作？

干杯

解决方法

您需要将Facelets(视图/模板技术)和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>

(：内容是指< h：panelGroup id =“content”>位于upper：level)

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>

管理豆：

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>).