使用Ajax请求的JSF动态包含

17
在JSF2中,是否可以使用Ajax请求动态更改ui:include的src值(例如像PrimeFaces p:commandButton一样)?谢谢。
<h:form>                        
    <h:commandLink value="Display 2" action="#{fTRNav.doNav()}">
        <f:setPropertyActionListener target="#{fTRNav.pageName}" value="/disp2.xhtml" />
    </h:commandLink>
</h:form>

<ui:include src="#{fTRNav.pageName}"></ui:include>

这就是我现在拥有的。是否可能使用p:commandButton将其变为Ajax?

3个回答

17

其他答案中提议的 JSTL 标签并不是必需的,而且它不太容易重用。

以下是一个基本示例,使用纯 JSF(假设您正在运行 Servlet 3.0 / EL 2.2,否则您确实需要像在问题中那样使用 <f:setPropertyActionListener>):

<h:form>
    <f:ajax render=":include">
        <h:commandLink value="page1" action="#{bean.setPage('page1')}" />
        <h:commandLink value="page2" action="#{bean.setPage('page2')}" />
        <h:commandLink value="page3" action="#{bean.setPage('page3')}" />
    </f:ajax>
</h:form>

<h:panelGroup id="include">
    <ui:include src="#{bean.page}.xhtml" />
</h:panelGroup>

使用

private String page;

@PostConstruct
public void init() {
    this.page = "page1"; // Ensure that default is been set.
}

// Getter + setter.

是的,我正在使用servlet 3.0,但我不太确定EL的版本(我怎么知道呢?)。我正准备问这个问题,因为我绝对不想使用JSTL。而且这个看起来更好。谢谢。 - Bhesh Gurung
1
EL 2.2与Servlet 3.0相辅相成。只要您的web.xml符合Servlet 3.0(并且您在/WEB-INF/lib中没有任何专有的el-api.jar、el-impl.jar等),它就可以正常工作。 - BalusC

3

使用ManagedBean动态渲染子内容的方法如下。首先,我通过 private String name="/main_pages/mainpage.xhtml" 将页面设置为中心(该值将在菜单触发器更改时更改),然后每次点击子菜单时,HelloBean会重置"name"并通过update=":content"更新内容- 然后从Bean中检索新的名称:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">




        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>

            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="150" resizable="true" closable="true" collapsible="true">
                    <h1>Madeline<br>shop</br></h1>
                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    Zapraszamy do odwiedzania naszego biura!
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="Menu" collapsible="true">
                    <h:form>
                    <p:menu>
                            <f:ajax render=":content">
                            <p:menuitem value="O naszej agencji" action="#{helloBean.setName('/main_pages/onas.xhtml')}" update=":content" />
                            <p:menuitem value="Ubezpieczenia pojazdów" action="#{helloBean.setName('/main_pages/ubpoj.xhtml')}" update=":content" />
                            <p:menuitem value="Ubezpieczenia majątkowe" action="#{helloBean.setName('/main_pages/ubmaj.xhtml')}" update=":content" />
                            <p:menuitem value="Ubezpieczenia na życie" action="#{helloBean.setName('/main_pages/ubnaz.xhtml')}" update=":content" />
                            <p:menuitem value="Zapytaj" action="#{helloBean.setName('/main_pages/zapytaj.xhtml')}" update=":content" />
                            <p:menuitem value="Kontakt" action="#{helloBean.setName('/main_pages/kontakt.xhtml')}" update=":content" />
                            </f:ajax>
                    </p:menu>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <br></br><br></br>
                    <p:panel id="content">
                                        <ui:include src="#{helloBean.name}" />
                    </p:panel>       

                </p:layoutUnit>

            </p:layout>

        </h:body>



</html>

我的托管 Bean:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.io.Serializable;
/**
 *
 * @author root
 */
@ManagedBean
@RequestScoped
public class HelloBean implements Serializable {

    /**
     * Creates a new instance of HelloBean
     */
    private static final long serialVersionUID = 1L;

    private String name="/main_pages/mainpage.xhtml";

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

1

您需要在ui:include周围使用<c:if test="condition">标签,然后当单击ajax按钮时,刷新包含ui:include的面板。

示例

首先确保通过在文档中插入以下命名空间来包含jstl core taglib:

<html xmlns:c="http://java.sun.com/jsp/jstl/core>"

然后,您可以按以下方式使用<c:if>标签:

<c:if test="#{!logBean.loggedIn}">
    <ui:include src="loginpage.xhtml" />
</c:if>
<c:if test="#{logBean.loggedIn}">
    <ui:include src="home.xhtml" />
</c:if>

这个能用于ajax请求吗? - Bhesh Gurung

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接