1

I've now tried several "solutions" but no one worked for me. First i introduce the problem.

I have a strictly html 5 template which i use fo my project so it is not possible to change here anything. The Framework used is JSF 2.0

The Problem:

I have a xhtml template like this:

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>

and a header.xhtml

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

and so on and a leftsidebar.xhtml where are links to the pages

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

and last but not least a content page with:

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>

Now I want to navigate from a link or commandLink or something else what renders to an a href (without any other jsf added tags) from the leftsidebar.xhtml to load the templated content.xhtml with only rendering this content.xhtml maybe by 

<f:ajax render=":some_id_in_the_content_page">

The reason why to do that is that the links in the left menu are inside another list ul element which collapse down and shows these sublinks. But when the page is loaded the menu is closed again.

Before you come across with all the links i have already visited: I've tried the commandlink and ajax solution from here: how-to-ajax-refresh-the-main-content-part-by-navigation-menu

and the solution of balusC from here: tricky include

and also the extended solution of BalusC from here: how-to-do-partial-page-rendering-center-content-with-jsf2-templating-via-ajax

To short this. Solution 1 did not work

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

and also with a form outside and put the ajax tag to the form did not work.

Solution 2 is in fact no alternative for me, caused by security, js etc issues

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

with the template

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

The last solution wants me also to put my template files outside the WEB-INF folder to access them directly from the url. That might not be a solution to me. But I read about a post where a user had the same problem and found a solution by himself. But he did not post the solution - just a border of a solution and I wanted to ask you whether you know what he has done here: a sounds good half solution or if anyone has an idea of what i can do else.

Thank you very much

Community
  • 1
  • 1
Siggi
  • 11
  • 2
  • I read your question, but I'm not sure what you're trying to do. Your example is way too long, and I can't easily figure out how to compile it. Can you not reduce your example to an [MCVE](http://stackoverflow.com/help/mcve)? – DavidS Apr 22 '15 at 22:10
  • Also, I'm not familiar with your use of facets. "The Facet tag registers a named facet on the component associated with the enclosing tag. A facet represents a named section within a container component. For example, you can create a header and a footer facet for a dataTable component" ([ref](http://www.jsftoolbox.com/documentation/help/12-TagReference/core/f_facet.html)), so what are you achieving by creating a facet at the top-level? – DavidS Apr 22 '15 at 22:12
  • 1
    Hello, the Facets are not that problem. These facets are are used to order the loading order of css and js files. The problem is described above. I want to achieve the navigation to a xhtml page which uses a template, but i only want to render the content of this xhtml file, not the leftsidebar, the header or what else is in the template. The reason is a javascript modification of bootstrap in the leftsidebar menu. When rerendering also the leftsidebar, this DOM modifications are lost. – Siggi Apr 23 '15 at 06:03
  • I've reduced the amount of tags to clarify what is the main problem. I hope this helps. – Siggi Apr 23 '15 at 06:22
  • Whats up here? No one can help here? I thought this could not be a so extraordinary requirement. – Siggi Apr 24 '15 at 11:35
  • I think the problem is that it's not an extraordinary problem: it's a simple one with known solutions that you've [linked to](https://stackoverflow.com/questions/7108668/how-to-ajax-refresh-the-main-content-part-by-navigation-menu) yourself. You should _start with_ one of these known solutions, implement it, test it, and then incrementally modify it to suit your needs, all while testing to see that it works. When you encounter a specific problem that you cannot solve yourself, describe it in a question. As is, your question is large and vague, where people prefer short and specific. – DavidS Apr 24 '15 at 17:57
  • In your question you mention "The reason why to do that is that the links in the left menu are inside another list ul element which collapse down and shows these sublinks. But when the page is loaded the menu is closed again." Is this your only problem? If this is your only problem, why not write a _short_ example that demonstrates it and show us that? – DavidS Apr 24 '15 at 17:58

0 Answers0