Question

我有以下JSF页面：

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
      ...
    </h:head>
<h:body>
    <h:form>
      <div id="VERTICAL_MENU">
          <ul id="menu" class="mainMenu">
             <li><div class="noSub"></div><h:commandLink action="customerVoice.xhtml"><h2>contact</h2><f:ajax render="ContentLoader" /></h:commandLink></li>
</ul>
</div>
<div class="INNER_CONTENT_ROW" >
  <h:panelGroup id="ContentLoader" >
       <div id="CONTENT_CONTAINER">
           <ui:insert name="ContentPage" >Default Content</ui:insert>
       </div>
   </h:panelGroup>
</div>
</h:form>
</h:body>

我想按<ui:insert>加载<f:ajax>内容，但它不起作用。

所需内容如下：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition template="/parentBranches.xhtml">
        <ui:define name="ContentPage" >
            <div id="pageContent" >
                <div id="TITLE" ><h1 class="tBox" ><h:outputText value="در دست ساخت" /></h1></div>
                <div class="fullClear" ></div>
                <div class="UP_BUttON" >
                    <h:commandLink ><img src="images/feed.png" class="feedButton" /></h:commandLink>
                    <h:commandLink ><img src="images/printer.png" class="printButton" /></h:commandLink>
                </div>
                <div class="fullClear" ></div>
                <div id="CONTEXT" >
                    <div class="cImg" ><h:graphicImage url="images/sample.png" /></div>
                    <h:outputText value="content" />
                </div>
            </div>
        </ui:define>
    </ui:composition>
</html>

单击链接时，不执行任何操作，页面内容也不会更改。

Answer 1

JSF的<ui:insert>用于创建模板。根据您的代码，我认为第一段代码是模板parentBranches.xhtml。第二段代码是使用上述模板的模板客户端customerVoice.xhtml。简而言之，template + template client = page。如果要打开customerVoice.xhtml页面，则必须导航到该页面。你不能用Ajax做到这一点。

总的来说，我可以想出两种方法来实现你的目标：

不要使用Ajax删除整个<f:ajax>并将其保留为：

<h:commandLink action="customerVoice"><h2>contact</h2></h:commandLink>

使用<ui:include>。

在您的第一个.xhtml页面中，您可以将ContentLoader部分更改为以下内容：

<h:panelGroup id="ContentLoader" >
   <div id="CONTENT_CONTAINER">
      <ui:include src="#{mrBean.page}" />
   </div>
</h:panelGroup>

更改您的链接，如下所示：

<h:commandLink actionListener="#{mrBean.openPage('customerVoice.xhtml')}"
               value="contact" style="font-size: large">
   <f:ajax render="ContentLoader" />
</h:commandLink>

创建ManagedBean来控制内容。它应该是这样的：

@ManagedBean
@RequestScoped
public class MrBean {
   private String page;

   public MrBean() {
      this.page = "The link to the page that contains your default content";
   }

   public void openPage(String thePage) {
      this.page = thePage;
   }
}

您可以查看此answer，了解有关<ui:include>的其他示例。来自 Mkyong.com 的tutorial也可能对您有用。

更新：这是您试用的测试页：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body >
        <h:form id="form"> 
            <h:commandLink actionListener="#{mrBean.openPage('Full URL to your customerVoice.xhtml')}"
                           value="contact" style="font-size: large">
                <f:ajax render="ContentLoader" />
            </h:commandLink>

            <h:panelGroup id="ContentLoader" >
                <div id="CONTENT_CONTAINER">
                    <ui:include src="#{mrBean.page}" />
                </div>
            </h:panelGroup> 

        </h:form>
    </h:body>
</html>

带有ui的ajax：在JSF中插入

1 个答案: