Question

我现在尝试了几种解决方案＆＃34;但没有人为我工作。首先我介绍一下这个问题。

我有一个严格的html 5模板，我使用我的项目，因此无法在此更改任何内容。使用的框架是JSF 2.0

问题：

我有一个像这样的xhtml模板：

的template.xhtml

<h:head>
    <title>SOME MAIN TITLE | <ui:insert name="title" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name='viewport' content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link href="much css files here" rel="stylesheet" type="text/css" />
    <ui:insert name="stylesheet" />
    <ui:insert name="script" />
</h:head>
<h:body styleClass="skin-blue">
    <ui:insert name="header">
        <ui:include src="header.xhtml" />
    </ui:insert>
    <ui:insert name="lsidebar">
        <ui:include src="leftsidebar.xhtml" />
    </ui:insert>
    <ui:insert name="content" />
    <ui:insert name="footer">
        <ui:include src="footer.xhtml" />
    </ui:insert>
</h:body>

和header.xhtml

<body>
  <ui:composition>
      <header content here>
  </ui:composition>
</body>

依此类推，并且leftsidebar.xhtml是指向页面的链接

<body>
    <ui:composition>
        <!-- This is the collapse menu item with subitems -->
        <li class="treeview">
            <h:link fragment="#">
                <h:panelGroup id="management">
                    <h:outputText value="#{msg['sidebar.navLink.management']}" />
                </h:panelGroup>
            </h:link>
            <ul class="treeview-menu">
                <!-- This is one menu subitem -->
                <li>
                    <h:link outcome="/pages/subfolder/content1.xhtml">
                        <h:outputText value="Click me to navigate to 1" />
                    </h:link>
                </li>
                <!-- This is another menu subitem -->
                <li>
                    <h:link outcome="/pages/subfolder/content2.xhtml">
                        <h:outputText value="Click me to navigate to 2" />
                    </h:link>
                </li>
            </ul>
        </li>
    </ui:composition>
</body>

以及最后但并非最不重要的内容页面：

content.xhtml

<h:body>
    <ui:composition>
        <ui:define name="title"> 
            <h:outputText value="#{msg['content.pageTitle']}" /> 
        </ui:define> 
        <ui:define name="stylesheet"/>
            <h:outputStylesheet name="some.css" library="css" />
        </ui:define>
        <ui:define name="script"/>
            <h:outputScript name="some.js" library="js" />
        </ui:define>
        <ui:define name="content">
            <Some content here>
        </ui:define>
    </ui:composition>
</h:body>

现在我想从leftsidebar.xhtml中的链接或commandLink或其他东西渲染到一个href（没有任何其他jsf添加的标签）来加载模板化的content.xhtml，只渲染这个内容。通过

<f:ajax render=":some_id_in_the_content_page">

这样做的原因是左侧菜单中的链接位于另一个列表ul元素内，该元素向下折叠并显示这些子链接。但是当页面加载时，菜单会再次关闭。

在您遇到我已经访问过的所有链接之前：我已经尝试过此处的commandlink和ajax解决方案：how-to-ajax-refresh-the-main-content-part-by-navigation-menu

以及此处的balusC解决方案：tricky include

以及BalusC的扩展解决方案：how-to-do-partial-page-rendering-center-content-with-jsf2-templating-via-ajax

简而言之。解决方案1无法正常工作

<li>
    <h:commandLink action="/pages/subfolder/content1.xhtml">
        <f:ajax render="contentOnly">
        <h:outputText value="Click me to navigate to 1" />
    </h:commandLink>
</li>
<li>
    <h:commandLink action="/pages/subfolder/content2.xhtml">
        <f:ajax render="contentOnly">
        <h:outputText value="Click me to navigate to 2" />
    </commandLink>
</li>

并且还有一个外部表单并将ajax标记放到表单中不起作用。

解决方案2对我来说实际上是替代方案，由安全性，js等问题引起

<li>
    <h:commandLink action="#{navBean.setPage('content1.xhtml')">
        <f:ajax render="contentOnly">
        <h:outputText value="Click me to navigate to 1" />
    </h:commandLink>
</li>
<li>
    <h:commandLink action="#{navBean.setPage('content2.xhtml')">
        <f:ajax render="contentOnly">
        <h:outputText value="Click me to navigate to 2" />
    </commandLink>
</li>

使用模板

<h:body styleClass="skin-blue">
    <ui:insert name="header">
        <ui:include src="header.xhtml" />
    </ui:insert>
    <ui:insert name="lsidebar">
        <ui:include src="leftsidebar.xhtml" />
    </ui:insert>
    <ui:insert name="content">
        <h:panelGroup rendered="#{navBean.page == 'content1'}">
            <ui:include src="content1.xhtml" />
        </h:panelGroup">
        <h:panelGroup rendered="#{navBean.page == 'content2'}">
            <ui:include src="content1.xhtml" />
        </h:panelGroup>
    </ui:insert>
    <ui:insert name="footer">
        <ui:include src="footer.xhtml" />
    </ui:insert>
</h:body>

最后一个解决方案还希望我将我的模板文件放在WEB-INF文件夹之外，以便直接从url访问它们。这可能不是我的解决方案。但是我读到了一个用户遇到同样问题的帖子并且自己找到了解决方案。但是他没有发布解决方案 - 只是一个解决方案的边界，我想问你是否知道他在这里做了什么：a sounds good half solution或者是否有人知道我能做些什么。

非常感谢

从模板化页面的菜单commandLink进行部分渲染

0 个答案: