3 Replies Latest reply: Jul 25, 2012 12:16 PM by REDO LOG RSS

    how to change the content of a div?

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