reRender commandButton depending on selectOption value in visualforce

Question

In visualforce page I have a custom picklist with the values "Show" and "Hide" and two command buttons(Button A & Button B). When the picklist value is "Show", Button B needs to be displayed and when it's "Hide" then Button B needs to be hidden.

For that I have tried below code

Visualforce page :

<apex:page showHeader="false" controller="picklistRenderController">
<apex:form >
    <apex:pageBlock >
        <apex:selectList value="{!selectId}" size="1">
            <apex:selectOptions value="{!display}"></apex:selectOptions>
            <apex:actionSupport event="onchange" action="{!displayButton}" reRender="d"/>
        </apex:selectList>
        <apex:pageBlockButtons location="bottom" id="d">
            <apex:commandButton action="{buttonA}" value="Button A"/>
            <apex:commandButton action="{buttonB}" value="Button B" rendered="{!selectId=='show'}"/>
        </apex:pageBlockButtons>
     </apex:pageBlock>
</apex:form>
</apex:page>

Controller is :

public class picklistRenderController {

  public List<selectoption> display { get; set; }
  public String selectId { get; set; }

  public PageReference buttonB() {
     return null;
  }

  public PageReference buttonA() {
      return null;
  }

  public PageReference displayButton() {

      return null;
  }


  public picklistRenderController()
  {
     display =new List<selectoption>();
     display.add(new selectoption('none','-select-'));
     display.add(new selectoption('show','show'));
     display.add(new selectoption('hide','hide'));
  }
}

But I couldn't able to get this work. Please help me on this.

Answer 1

Putting an <apex:outputPanel> inside your <apex:pageBlockButtons> tags and using that as the rerender target makes the page work as expected:

    <apex:selectList value="{!selectId}" size="1">
        <apex:selectOptions value="{!display}"></apex:selectOptions>
        <apex:actionSupport event="onchange" action="{!displayButton}" reRender="buttons"/>
    </apex:selectList>
    <apex:pageBlockButtons location="bottom">
        <apex:outputPanel id="buttons">
        <apex:commandButton action="{buttonA}" value="Button A"/>
        <apex:commandButton action="{buttonB}" value="Button B" rendered="{!selectId=='show'}"/>
        </apex:outputPanel>
    </apex:pageBlockButtons>

Right now I can't see a good reason for it not to work, especially since the documentation contains the following:

An identifier that allows the pageBlockButtons component to be referenced by other components in the page.

That said, I suspect there is a good reason (perhaps it's because it's a table element in the final markup) but generally with these things it's easier to use a reliable work around than spend hours trying to understand the internal quirks of the system.

Answer 2

Page:

<apex:page controller="picklistRenderController">
<apex:form >
<apex:pageBlock >
    <apex:selectList value="{!selectId}" size="1">
        <apex:selectOptions value="{!display}"></apex:selectOptions>
        <apex:actionSupport event="onchange" action="{!displayButton}" reRender="buttons"/>
    </apex:selectList>
    <apex:pageBlockButtons location="bottom">
    <apex:outputPanel id="buttons">
        <apex:commandButton action="{buttonA}" value="Button A" rendered="{!Y}"/>
        <apex:commandButton action="{buttonB}" value="Button B" rendered="{!X}"/>
        </apex:outputPanel>
    </apex:pageBlockButtons>
 </apex:pageBlock>
</apex:form>
</apex:page>

Class:

public class picklistRenderController
{

public List<selectOption> display { get; set; }
public String selectId { get; set; }
public Boolean X { get; set; }
public Boolean Y { get; set; }

public picklistRenderController() 

{


    Y=True;
    display= new List<selectOption>();
    display.add(new selectoption('none','-select-'));
    display.add(new selectoption('Show','Show'));
    display.add(new selectoption('Hide','Hide'));
}

 public void displayButton()

  {


     if (selectId =='Show')
     X=True;
     else
     X=False;

  }




public PageReference buttonA()

 {
    return null;

 }


  public PageReference buttonB()

 {

    return null;
 }

}