This discussion is archived
3 Replies Latest reply: Jul 25, 2012 10:16 AM by REDO LOG RSS

how to change the content of a div?

REDO LOG Newbie
Currently Being Moderated
Hi All

I am about writing a web page that is divided into a left menu a the content and I have a menubar with buttons in the left menu content.
My aim is when I click on the buttons the content (right side o the page) change according to action of the buttons


this is the code of the page


<ui:composition template="./welcomeTemplate.xhtml">

<ui:define name="left">
<ui:include src="./head.xhtml" />
</ui:define>



<ui:define name="content">

<div id="Content" >
<ui:include src="./personnelPage.xhtml "/> <!-- my goal is the change this content when a button is clicked , for example changed it to
<ui:include src="./formationPage.xhtml" /> and display it -->


</div>
</ui:define>


</ui:composition>




thanks for help

I am using JSF 2.0 and primefaces 3.3.4 and netbeans 7.1.2
  • 1. Re: how to change the content of a div?
    r035198x Pro
    Currently Being Moderated
    In your main template, template the main content on the right side with
    <ui:insert name="content">
                 [Other pages' content will be here]
     </ui:insert>
    Your right side links just point to the requested page, no need for ui:include here
    <li><h:link value="#{msg.personelLAbel}" outcome="/personnelPage" /></li>
    Then the pointed to pages inherit the main template and define their own content using
    <ui:define name="content">
    <!-- personnelPage contents here-->
    </ui:define>
  • 2. Re: how to change the content of a div?
    gimbal2 Guru
    Currently Being Moderated
    IMO, a near perfect answer (outcome of the link should not begin with a slash - its not a url).

    In other words: use Facelets templating as it was designed and documented in many articles and a the few books on JSF 2 that exist.
  • 3. Re: how to change the content of a div?
    REDO LOG Newbie
    Currently Being Moderated
    Hi thank you for responding
    I really didn't get the idea, but here is what I understand from your post (correct me if it is wrong)


    <body>



    <ui:composition template="./welcomeTemplate.xhtml">

    <ui:define name="left">
    <ui:include src="./head.xhtml" />
    </ui:define>



    <ui:define name="content">
    *<ui:include src ="./#{menuContent.currentPage}.xhtml"/>*
    </ui:define>


    </ui:composition>

    </body>



    and the menu bar buttons change the variable curentPage of the managed Bean class MenuContent


    but there are two problems: 1) is that the content of the page must be updated
    2) the menu bar is single page that I include in the welcome page (seem as the content pages)



    thanks for help

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points