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

I think the topic explain what Im looking for :

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

template.xhtml

的template.xhtml

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

index.xhtml

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

Managed 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;
        }
    }   
}  

By using template definition, I insert the content_homepage as first content. After, when i do an ajax call, if the name isnt empty, I will load content_login. Is it possible to do this on JSF?

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

Cheers

干杯

1 个解决方案

#1

You need to separate the concepts of Facelets (the view/templating technology) and JSF (the component based MVC framework). What you want is not possible with alone Facelets since the Facelets ui tags are solely server side and doesn't emit anything to client side. You need to bring in a JSF component (which generates at end HTML) which can be located by the JS/Ajax in the client side.

您需要将Facelets（视图/模板技术）和JSF（基于组件的MVC框架）的概念分开。单独的Facelets不可能实现你想要的东西，因为Facelets ui标签只是服务器端，不向客户端发射任何东西。您需要引入一个JSF组件（在最终HTML生成），它可以由客户端的JS / Ajax定位。

template.xhtml

的template.xhtml

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

(the layout="block" makes it a <div> instead of <span>)

（layout =“block”使其成为

而不是 ）

The button of index.html:

index.html的按钮：

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

(the :content refers to <h:panelGroup id="content"> which is located in upper : level)

（：内容是指 ，它位于upper：level） ：panelgroup>

The content template definition of index.html:

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>

Managed 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.
} 

Further, don't use spans as labels. That's bad HTML semantics. Use <h:outputLabel> (or plain HTML <label>).

此外，不要使用跨度作为标签。这是糟糕的HTML语义。使用 （或纯HTML ）。 ：outputlabel>