4

I want a simple way in Visualforce to expose part of the page in response to a button click. This should be easy, but it is giving me more trouble than anything I've done with VF to date.

After reading How can an apex:pageBlockSection be rerendered I wrapped the re-render section in a div tag, but that didn't help at all.

Here is a much-simplified version of the page:

<apex:page controller="ProvisioningController">

    <apex:form >
        <apex:commandButton action="{!showActivationForm}" value="Activate" rerender="activationForm"/> 
    </apex:form>

    <div id="activationForm">
        <apex:form rendered="{!activationFormIsVisible}">
            <p>Show some more fields here...</p>
            <apex:commandButton action="{!updateDb}" value="Whatever, Man"/>
        </apex:form>
    </div>

</apex:page>

And the relevant controller code:

public with sharing class ProvisioningController {

    public Boolean activationFormIsVisible { get; private set; }

    public ProvisioningController() {
        activationFormIsVisible = false;
    }

    public PageReference showActivationForm() {
        this.activationFormIsVisible = true;
        return ApexPages.currentPage();
    }
}

It seems like I shouldn't even need to use my controller for this kind of task.

5

Your code isn't working because you can only rerender Visualforce components -- the Visualforce framework can't tell that you have a plain HTML <div>. This should work:

<apex:outputPanel id="activationForm">
    <apex:form rendered="{!activationFormIsVisible}">
        <p>Show some more fields here...</p>
        <apex:commandButton action="{!updateDb}" value="Whatever, Man"/>
    </apex:form>
</apex:outputPanel>

Having said that, I think you're right, and this is total overkill. It's one of the places where plain Javascript/jQuery shines:

<button class="btn" onclick="jQuery('#activationForm').slideDown()">
    Activate
</button>

<div id="activationForm" style="display:none">
    <apex:form rendered="{!activationFormIsVisible}">
        <p>Show some more fields here...</p>
        <apex:commandButton action="{!updateDb}" value="Whatever, Man"/>
    </apex:form>
</div>

Here, the btn style on the <button> lets you mimic SFDC's standard button styling (if you want), and the style attribute on the div keeps it hidden when the page is first loaded.

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.