2

Can anyone tell me how to hide and show the output panel in visualforce page
My usecase is:
I have 2 output panel. In the first I have a commandlink when I click on the link the 1st outputpanel should get hide and 2nd one get display and same for output panel 2

I have tried following code but it doesnt give the expected

VFP

<apex:page controller="MyController1">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection id="search">

<apex:outputPanel id="thePanelWrapper1">
<apex:outputPanel id="panel1" rendered="{!rend1}" layout="block">

First Panel

<apex:commandLink action="{!commandLinkAction}" value="show second"  reRender="thePanelWrapper2" />
    </apex:outputPanel>
    </apex:outputPanel>

Second Panel

<apex:commandLink action="{!commandLinkAction1}" value="show first"  reRender="thePanelWrapper1" />
</apex:outputPanel>
</apex:outputPanel>

Controller:

public class MyController1{

    public MyController1(ApexPages.StandardController controller) {
        rend = false;
    }

    public MyController1(){
          rend = false;
    }
    public Boolean rend{get;set;}
    public Boolean rend1{get;set;}

    public void commandLinkAction(){
        rend=true;
        rend1=false;

        // return null;
    }

    public void commandLinkAction1(){
        rend1=true;
        rend=false;
    }

}

I don't know what's wrong in my code.

Updated Code

<apex:page controller="MyController1">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection id="search">

<apex:outputPanel id="thePanelWrapper1">
    <apex:outputPanel id="panel1" rendered="{!rend1}" layout="block">
        <apex:commandLink action="{!commandLinkAction}" value="show second"  reRender="thePanelWrapper2" />
    </apex:outputPanel>
</apex:outputPanel>

<apex:outputPanel id="thePanelWrapper2">
    <apex:outputPanel id="panel2" rendered="{!!rend1}" layout="block">
        <apex:commandLink action="{!commandLinkAction1}" value="show first"  reRender="thePanelWrapper1" />
    </apex:outputPanel>
</apex:outputPanel>


</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

</apex:page>

Controller:

public class MyController1{


public MyController1(){
          rend1 = true;
   }

   public Boolean rend1{get;set;}

   public void commandLinkAction(){

      rend1=false;

     // return null;
   }
    public void commandLinkAction1(){
        rend1=true;


    }

}   
  • Id id="panel1" for one panel is a mistake ? You try to rerender with this id instead : reRender="thePanelWrapper2". – SF_user Dec 1 '14 at 8:36
  • @SF_user : it doesnt work – user3332076 Dec 1 '14 at 9:01
  • @SF_user: can you give me sample code for this – user3332076 Dec 1 '14 at 9:01
  • Using Javascript for doing that can be a solution ? – SF_user Dec 1 '14 at 9:20
1

This works for me:

Controller:

public class MyController1{

public Boolean render1{get;set;}
public Boolean render2{get;set;}

public MyController1(ApexPages.StandardController controller) {
    render1 = true;
    render2 = false;
}

public MyController1(){
    render1 = true;
    render2 = false;
}


public void hide1Show2(){
    render1=false;
    render2=true;

}

public void hide2Show1(){
    render1=true;
    render2=false;
}

}

Page:

<apex:page controller="MyController1">
  <apex:form >
    <apex:pageBlock>
      <apex:pageBlockSection id="search">

        <apex:outputPanel id="thePanelWrapper1">
          <apex:outputPanel id="panel1" rendered="{!render1}" layout="block">
            <apex:commandLink action="{!hide1Show2}" value="show second"  reRender="thePanelWrapper1,thePanelWrapper2" />
          </apex:outputPanel>
        </apex:outputPanel>

        <apex:outputPanel id="thePanelWrapper2">
          <apex:outputPanel id="panel2" rendered="{!render2}" layout="block">
            <apex:commandLink action="{!hide2Show1}" value="show first"  reRender="thePanelWrapper1,thePanelWrapper2" />
          </apex:outputPanel>
        </apex:outputPanel>


    </apex:pageBlockSection>
  </apex:pageBlock>
</apex:form>

  • [~user3332076] did you try the above? – sunnymatharuuk Aug 1 '17 at 13:30
0

Updated your VF code a bit. See if this works for you. Note the changes in the rerender attributes and value in the rendered attribute

VF Page

<apex:page controller="MyController1">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection id="search">

<apex:outputPanel id="thePanelWrapper1">
    <apex:outputPanel id="panel1" rendered="{!rend1}" layout="block">
        <apex:commandLink action="{!commandLinkAction}" value="show second"  reRender="thePanelWrapper2,thePanelWrapper1" />
    </apex:outputPanel>
</apex:outputPanel>

<apex:outputPanel id="thePanelWrapper2">
    <apex:outputPanel id="panel2" rendered="{!!rend1}" layout="block">
        <apex:commandLink action="{!commandLinkAction1}" value="show first"  reRender="thePanelWrapper1,thePanelWrapper2" />
    </apex:outputPanel>
</apex:outputPanel>


</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

</apex:page>

Controller ( same as the one you posted in the question )

public class MyController1{

    public MyController1(ApexPages.StandardController controller) {
    rend = false;
    }
public MyController1(){
          rend = false;
   }
   public Boolean rend{get;set;}
   public Boolean rend1{get;set;}

   public void commandLinkAction(){
      rend=true;
      rend1=false;

     // return null;
   }
    public void commandLinkAction1(){
        rend1=true;
        rend=false;

    }

}

Screenshot of working example.

enter image description here

enter image description here

  • My use case is I have 2 output panel and each panel has one button which is used to show another panel – user3332076 Dec 1 '14 at 10:05
  • If I click the button in first panel then it will show the content of second panel and hide the content of first panel and same for second panel button – user3332076 Dec 1 '14 at 10:06
  • But in this code the content of panel is not hiding after clicking the buttton – user3332076 Dec 1 '14 at 10:07
  • It does for me. Try this code as a new page. Note the changes for rerender attribute. Maybe you didn't change that in your code. – AslamK Dec 1 '14 at 10:20
  • it doesnt work man – user3332076 Dec 1 '14 at 10:28
0

Try this :

<apex:page controller="MyController1">
  <apex:form >
    <apex:pageBlock >
    <apex:pageBlockSection id="search">

     <apex:outputPanel id="thePanelWrapper1">
        <apex:commandLink action="{!commandLinkAction}" value="show second"  onclick="showPanel('second')" />
     </apex:outputPanel>

    <apex:outputPanel id="thePanelWrapper2" layout="block" style="display: none">
        <apex:commandLink action="{!commandLinkAction}" value="show first"  onclick="showPanel('first')" />
    </apex:outputPanel>

    </apex:pageBlockSection> 
  </apex:pageBlock>
</apex:form>


    <script type="text/javascript">
        function showPanel(panel) {
            if(panel == 'first') {
                document.getElementById('{!$Component.search.thePanelWrapper1}').style.display = 'block';
                document.getElementById('{!$Component.search.thePanelWrapper2}').style.display = 'none';
            } else {
                document.getElementById('{!$Component.search.thePanelWrapper1}').style.display = 'none';
                document.getElementById('{!$Component.search.thePanelWrapper2}').style.display = 'block';
            }
        }
    </script>

</apex:page>
  • it gives both output panel by default – user3332076 Dec 1 '14 at 9:51
  • Initially it will show panel1 – user3332076 Dec 1 '14 at 9:52
  • after clicking first panel link then it will show second panel content and hide the first panel content – user3332076 Dec 1 '14 at 9:52
  • I edited my answer to initially hide the second panel. Otherwise it works ? – SF_user Dec 1 '14 at 10:07
  • It doesnt work man.. Can you give me the working code – user3332076 Dec 1 '14 at 10:37
0

Try this code for your Controller.

public class MyController1{

    public Boolean panel1 {get; private set;}
    public Boolean panel2 {get; private set;}

    public MyController(ApexPages.StandardController controller) {
        panel1 = true;
        panel2 = false;
    }

    public void displayPanel1(){
        panel1 = true;
        panel2 = false;
    }

    public void displayPanel2(){
        panel1 = false;
        panel2 = true;
    }
}

And this for your VF Page

<apex:page controller="MyController1">
  <apex:form >
    <apex:pageBlock >
    <apex:pageBlockSection id="search">

      <apex:outputPanel id="thePanelWrapper1" >
        <apex:outputPanel id="panel1" layout="block" rendered="{!panel1}" >
          <apex:commandLink action="{!displayPanel2}" value="show second"  reRender="thePanelWrapper1, thePanelWrapper2" />
        </apex:outputPanel>
      </apex:outputPanel>

      <apex:outputPanel id="thePanelWrapper2"  >
        <apex:outputPanel id="panel2" layout="block" rendered="{!panel2}">
          <apex:commandLink action="{!displayPanel1}" value="show first"  reRender="thePanelWrapper1, thePanelWrapper2" />
        </apex:outputPanel>
      </apex:outputPanel>

    </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

The commandLinks must rerender both panels, the outerpanels are the ones that need rerendered, but the render tag should be in the inner panels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.