7

I'm trying to display 1 of 4 sections based on a clicks on navigation panels.

I know that this could easily be done with a bit of JavaScript but I'd prefer to use the standard Visualforce mechanisms as this will allow me to only load the section that the user clicks as oppose to loading all sections at the beginning yet leaving them hidden.

So the idea is pretty simple. The user clicks one of the DIVs and then it displays the related section in container (whilst hiding the other 3 sections). For some reason it doesn't work and I've been unable to determine why.

Visualforce Page:

<apex:page showHeader="true" sidebar="false" title="White Tab" controller="WhiteTabController">
<style type="text/css">
.sectionbox {
    float:left;width:130px;height:20px;background-color: rgb(32,123,60);color: #ffffff;border:1px solid #ffffff;padding:10px;text-align:center;
}
</style>
    <div style="margin: 0 auto; width:608px; height:42px;">
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">RAG
            <apex:actionSupport event="onclick" action="{!setRAG}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">Hot Candidates
            <apex:actionSupport event="onclick" action="{!setHotCandidates}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">CV Sell Out
            <apex:actionSupport event="onclick" action="{!setCVSellOut}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <apex:actionRegion>
            <apex:outputPanel styleClass="sectionbox" layout="block">AMS Triggers
            <apex:actionSupport event="onclick" action="{!setTriggers}" rerender="container"/>
            </apex:outputPanel>
        </apex:actionRegion>
        <!--<div class="sectionbox">RAG</div>
        <div class="sectionbox">Hot Candidates</div>
        <div class="sectionbox">CV Sell Out</div>
        <div class="sectionbox">AMS Triggers</div>-->
    </div>

    <apex:actionRegion>
    <apex:outputPanel id="container">

        <apex:outputPanel rendered="{!showRAG}">
        RAG
        </apex:outputPanel>

        <apex:outputPanel rendered="{!showHotCandidates}">
        Hot Candidates
        </apex:outputPanel>

        <apex:outputPanel rendered="{!showCVSellOut}">
        CV Sell Out
        </apex:outputPanel>

        <apex:outputPanel rendered="{!showTriggers}">
        AMS Triggers
        </apex:outputPanel>
    </apex:outputPanel>
    </apex:actionRegion>
</apex:page>

Visualforce Controller:

public with sharing class WhiteTabController {

    public Boolean showRAG {get;set;}
    public Boolean showHotCandidates {get;set;}
    public Boolean showCVSellOut {get;set;}
    public Boolean showTriggers {get;set;}

    public WhiteTabController() {
        showRAG = false;
        showHotCandidates = false;
        showCVSellOut = false;
        showTriggers = false;
    }

    public void setRAG() {
        showRAG = true;
        showHotCandidates = false;
        showCVSellOut = false;
        showTriggers = false;
    }
    public void setHotCandidates() {
        showRAG = false;
        showHotCandidates = true;
        showCVSellOut = false;
        showTriggers = false;
    }
    public void setCVSellOut() {
        showRAG = false;
        showHotCandidates = false;
        showCVSellOut = true;
        showTriggers = false;
    }
    public void setTriggers() {
        showRAG = false;
        showHotCandidates = false;
        showCVSellOut = false;
        showTriggers = true;
    }
}

1 Answer 1

4

A debugging test you can do. Add an outputpanel that is rerendered everytime someone clicks on your divs. That panel should include your boolean values so you can double check your class is setting them correctly and they're getting updated on the page when you expect.

You can also probably remove many of your duplicated based on your code it is nearly the whole page.

You can also try replacing one of the outputpanels with a link and see if your behavior changes. My guess is your onclick action support isn't firing properly and therefore your boolean values aren't getting updated via the class.

You can also replace the action support with an actionFunction and an "onclick" example:

<apex:actionFunction name="datRAG" action="{!setRAG}" rerender="container" />
<apex:outputPanel styleClass="sectionbox" layout="block" onclick="datRAG()">RAG</apex:outputPanel> 
1
  • 1
    I tried replacing the outputpanel click handlers with a commandbutton and it does indeed work. So the problem is with trying to get the DIVS (using outputpanels) to work.
    – Venko
    Nov 27, 2013 at 15:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .