JSF动态包含使用Ajax请求[重复]

Posted

技术标签:

【中文标题】JSF动态包含使用Ajax请求[重复]【英文标题】:JSF dynamic include using Ajax request [duplicate] 【发布时间】:2011-09-07 07:58:58 【问题描述】:

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

这就是我现在所拥有的。是否可以使其成为 Ajax(使用 p:commandButton)?

【问题讨论】:

【参考方案1】:

其他答案中提出的 JSTL 标记不是必需的,并且不能很好地重用。

这是一个使用纯 JSF 的基本示例(假设您运行 Servlet 3.0 / EL 2.2,否则您确实需要像您的问题一样使用 &lt;f:setPropertyActionListener&gt;):

<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。而这个看起来更好。谢谢。 EL 2.2 与 Servlet 3.0 齐头并进。因此,只要您的 web.xml 被声明为符合 Servlet 3.0(并且您的 /WEB-INF/lib 中没有任何专有的 el-api.jarel-impl.jar 等),它就可以工作。【参考方案2】:

这是我使用 MnagedBean 动态呈现子内容的方法。首先,我使用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>

我的 ManagedBean:

/*
 * 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;
    

【讨论】:

【参考方案3】:

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

示例

首先通过在文档中插入以下命名空间来确保包含 jstl 核心标记库:

&lt;html xmlns:c="http://java.sun.com/jsp/jstl/core&gt;"

然后,你可以使用&lt;c:if&gt;标签如下:

<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 请求吗? 谢谢。它实际上是这样工作的。

以上是关于JSF动态包含使用Ajax请求[重复]的主要内容,如果未能解决你的问题,请参考以下文章

在每个 ajax 请求上重建 JSF 视图

使用 JSF ajax 请求刷新 URL

发出 JSF Ajax 请求时显示加载进度

在 JSF 自定义验证器中区分 ajax 请求和完整请求

JSF 2.0:按 ENTER 时的 ajax 请求

JSF ajax 请求中的异常处理