2 Replies Latest reply on Dec 4, 2012 2:15 PM by Mriem-Oracle

    Swap contents after click on the link


      I need to swap contents after click on the link. For example. My site has 4 modules: Header, menu, content and footer. I have these divs in Index.xhtml and I include these modules from other files (np header.xhtml - > <ui:composition> Header </ui:composition> ). Now i don't want to create for example 10 copies of Index.xhtml, just one and when i click on the link in menu, content must swap. (I want to swap including file in <div id=content> )

      For example - >

      In content is displayed file First.xhtml

      i'm clicking on the link second

      and now in content is displayed file Second.xhtml

      I don't have to use Ajax.

      Sorry for my language level, i learn :)

        • 1. Re: Swap contents after click on the link
          Not sure if this will help you, but I did have some similar requirement ( e.g. A drop-down would determine what "content" to show beneath the dropdown .. which are actually separate XHTML files that I include ).

          I did this using RichFaces <rich:togglePanel>, where you can toggle between the different panels either via Javascript(client), Ajax, or form-submit(server).

          An example of what I did:
                      <rich:togglePanel id="memberAndNOCTogglePanel" switchType="client" activeItem="#{insuranceCase.claimType}">
                          <rich:togglePanelItem id="DTH">
                              <ui:include src="/templates/insurance/memberDetailsDTH.xhtml"/>
                              <ui:include src="/templates/insurance/nocDetailsDTH.xhtml"/>
                          <rich:togglePanelItem id="TPD">
                              <ui:include src="/templates/insurance/memberDetailsTPD.xhtml"/>
                              <ui:include src="/templates/insurance/nocDetailsTPD.xhtml"/>
          .. Then the panels are swapped / toggled by a h:selectOneMenu, as follows, when using Javascript / client toggling.
          <h:selectOneMenu id="f_clmTyp" value="#{insuranceCase.claimType}"
                                      onchange="alert('Changing the Claim Type will clear the NOC Details.'); 
                                      selectedVal = this.options[this.selectedIndex].value; 
                                      return true;">
          You can look at their example at showcase.richfaces.org
          • 2. Re: Swap contents after click on the link
            Use the rendered attribute on a h:panelGroup.


            <h:panelGroup rendered="#{bean.option1}">
            your content A
            <h:panelGroup rendered="#{bean.option2}">
            your content B