This discussion is archived
2 Replies Latest reply: Dec 4, 2012 6:15 AM by 960507 RSS

Swap contents after click on the link

977405 Newbie
Currently Being Moderated
Hello,

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 :)

Greetings.
  • 1. Re: Swap contents after click on the link
    jmsjr Newbie
    Currently Being Moderated
    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>
                    <rich:togglePanelItem id="TPD">
                        <ui:include src="/templates/insurance/memberDetailsTPD.xhtml"/>
                        <ui:include src="/templates/insurance/nocDetailsTPD.xhtml"/>
                    </rich:togglePanelItem>
                <rich:togglePanel/>
    .. 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; 
                                RichFaces.$('caseForm:memberAndNOCTogglePanel').switchToItem(selectedVal);
                                return true;">
    You can look at their example at showcase.richfaces.org
  • 2. Re: Swap contents after click on the link
    960507 Newbie
    Currently Being Moderated
    Use the rendered attribute on a h:panelGroup.

    Eg.

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

Legend

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