Search code examples
templatesjsf-2primefacesupdatespartial

JSF 2 template partial update

I have the following JSF 2 template Page with primefaces menu, I want to partially update the cenral centent of the page onclick of links from left Menu, I don't want to update the entire page.I have gone throu the posts in stackoverflow, they are suggetign that I should have a form name in the central_body_div, but I don't want to sepcify a form in the central_body_div, as the dynamically loaded page will have form with it's own name, I should be able to submit the form in the page appearing dynamically in central_body_div div.

First of all the Layout page itself not loading , giving the below exception.

Cannot find component with identifier "central_body_div" referenced from "leftMenuFormId:menuItem1".

Experts can you give a solution for this problem. would apprecite your replies.

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <h:outputStylesheet name="cssLayout.css" library="css" />
            <h:outputStylesheet name="default.css" library="css" />        
            <title> Lightweight Mediation - Secure Pages </title>
        </h:head>

        <h:body id="securebody">

            <div id="top">
                <ui:insert name="top">
                    <ui:include src="/secure/home/header.xhtml" />
                </ui:insert>
            </div>
            <div id="content_holder">
                <div id="left">
                    <ui:insert name="left">
                        <ui:include src="/secure/home/leftMenu.xhtml" />
                    </ui:insert>
                </div>
                <div id="central_body_div" class="left_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="/secure/home/footer.xhtml" />
                </ui:insert>
            </div>

        </h:body>
    </f:view>
</html>

My leftMenu.xhtml content is below 

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition id="leftMenuCompositionId"> 
            <h:form id="leftMenuFormId">
                <p:menu id="lMenuId">
                    <p:menuitem id="menuItem1" value="page1" action="page1" update="central_body_div" partialSubmit="true"/>
                    <p:menuitem id="menuItem2" value="page2"  action="page2" update="central_body_div" partialSubmit="true" />
                </p:menu>
            </h:form>
        </ui:composition>
    </h:body>
</html>
Solution

  • Change your code with following and try again,

    leftMenu.xhtml

    <?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:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <ui:composition id="leftMenuCompositionId"> 
        <h:form id="leftMenuFormId">
            <p:menu id="lMenuId">
                <p:menuitem id="menuItem1" value="page1" action="page1" update=":form1:central_body_div" partialSubmit="true"/>
                <p:menuitem id="menuItem2" value="page2"  action="page2" update=":form1:central_body_div" partialSubmit="true" />
            </p:menu>
        </h:form>
    </ui:composition>
</h:body>

    and your template xhtml with,

    <?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:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">

<f:view contentType="text/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="cssLayout.css" library="css" />
        <h:outputStylesheet name="default.css" library="css" />        
        <title> Lightweight Mediation - Secure Pages </title>
    </h:head>

    <h:body id="securebody">

        <div id="top">

        </div>
        <div id="content_holder">
            <div id="left">
                <ui:insert name="left">
                    <ui:include src="leftMenu.xhtml" />                        
                </ui:insert>
            </div>
            <h:form id="form1" >
                <h:panelGroup id="central_body_div">
                    <script type="text/javascript">alert('Content Updated')</script>
                    <ui:insert name="content">Content</ui:insert>
                </h:panelGroup>
            </h:form>
        </div>
        <div id="bottom">

        </div>

    </h:body>
</f:view>

    It's checked and working.