How to change the content of template dynamicallay using ui:insert and ui:define?

Question

I am new this field.

I am using Facelets for template designing.

In my project,I need a template which is changing the content dynamically when click on p:menuitems with using ui:insert and ui:define.

I already tried this and its working fine like each p:menuitems clicks the page gets one refresh and then change the content.

But,I need to change the content of the template without get refresh of the page.

Here, I added my program.

home.xhtml

<ui:composition template="index.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets">

</ui:composition>

header.xhtml

<ui:composition  xmlns="http://www.w3.org/1999/xhtml"   
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://xmlns.jcp.org/jsf/core"
                 xmlns:h="http://xmlns.jcp.org/jsf/html"
                 xmlns:p="http://primefaces.org/ui">`enter code here`
    <h:form>
        <p:menu>
            <p:menuitem value="One"   url="/pages/one.xhtml"/> 
            <p:menuitem value="Two"  url="/pages/two.xhtml"/> 
            <p:menuitem value="Three" url="/pages/three.xhtml"/> 
        </p:menu>
    </h:form>
</ui:composition>

footer.xhtml

<ui:composition  xmlns="http://www.w3.org/1999/xhtml"   
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://xmlns.jcp.org/jsf/core">
            <p>This is Footer</p>
</ui:composition>

template.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
        <h:head>
            <title>Template Page</title>
        </h:head>
        <h:body>
            <div id="headerId">
                    <p:panel>
                        <ui:include src="/pages/header.xhtml"/>
                    </p:panel>
            </div>
            <div id="contentId">
                <ui:insert name="content">
                    <p:panel>
                    <p>Default Content</p>
                    </p:panel>
                </ui:insert>
            </div>
            <div id="footerId">
                    <p:panel>
                        <ui:include src="/pages/footer.xhtml"/>
                    </p:panel>
            </div>
        </h:body>
</html>

one.xhtml

<ui:composition template="template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"   
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:h="http://xmlns.jcp.org/jsf/html">

    <ui:define name="content">
        <p>Change content from one page</p>
    </ui:define>

</ui:composition>

two.xhtml

<ui:composition  template="template.xhtml"
                 xmlns="http://www.w3.org/1999/xhtml"   
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="content">
        <p>Change content from two page</p>
    </ui:define>

</ui:composition>

three.xhtml

<ui:composition template="template.xhtml"
            xmlns="http://www.w3.org/1999/xhtml"   
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:define name="content">
        <p>Change content from three page</p>
    </ui:define>
</ui:composition>

Here,The home.xhtml is my welcome page.

please,give me an idea to solve this.

Thanks in advance.

I just need to change the "" of the template dynamically with or without backing bean without refresh of the page....any idea plz? — Venkat Raj, Aug 30 '15 at 16:12
check [http://stackoverflow.com/questions/6219202/jsf-dynamic-include-using-ajax-request][this] @BalusC describe how to do that — Ahmed Gamal, Sep 09 '15 at 10:43

How to change the content of template dynamicallay using ui:insert and ui:define?

0 Answers0