JSF - 加载/ Ajax调用后插入一个不同的DIV [英] JSF - Load/insert a different div after an ajax call

问题描述

我觉得题目解释什么进出口寻找：

I think the topic explain what Im looking for :

的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

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

通过使用模板定义，我插入 content_homepage 作为第一个内容。之后，当我做一个Ajax调用，如果name心不是空的，我会加载 content_login 。是否有可能做到这一点对JSF？

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?

干杯

推荐答案

您需要单独的Facelets（视图/模板技术）和JSF（基于组件的MVC框架）的概念。你想要什么是不可能的，因为单独的Facelets Facelets的用户界面标签仅仅是服务器端不发出任何客户端。你需要引进一个JSF组件（产生在年底HTML），它可以在客户端位于由JS / AJAX。

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.

的template.xhtml

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

（即布局=块使它成为＆LT; D​​IV＆GT; 而不是＆LT;跨度＆GT; ）的

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

的按钮 index.html的：

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

（即：含量引用＆LT; H：panelGroup中ID =内容＆GT; 它位于上：级）的

(the :content refers to <h:panelGroup id="content"> which is located in 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>

托管bean：

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

另外，不要用跨度为标签。这是很糟糕的HTML语法。使用＆LT; H：outputLabel＆GT; （或纯HTML ＆LT;标签＆gt; ）

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

这篇关于JSF - 加载/ Ajax调用后插入一个不同的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！