Displaying fields based on picklist (apex:selectOption)

Question

I've been spending a lot more time than I thought I would trying to get this to work. On my VisualForce page I have a pick list that depending on the value will display or hide additional fields. I have looked at multiple solutions and I can't seem to get any of them to work.

My action function updateFieldVisibility doesn't seem to be being called because no debug statements are in my logs. I've tried to rerender the form, page block, and page block sections but they do not change. What am I missing here?

Visual Force Page:

<apex:page docType="html-5.0" controller="ConnectorHomeTabController" tabStyle="HigiConnector_HomePage__tab">
<apex:form id="editForm">
    <apex:pageBlock title="Edit Organization Default Data Access" id="editPageBlock">

        <apex:pageBlockButtons>
            <apex:commandButton action="{!saveDefaultSettings}" value="Save " />
            <apex:commandButton action="{!cancelEdit}" value="Cancel" />
        </apex:pageBlockButtons>

        <!-- Cadence specific fields -->
        <apex:actionRegion>
        <apex:pageBlockSection title="Cadence Settings" columns="2">

            <apex:pageBlockSectionItem>
                <apex:outputLabel value="Preferred Cadence" for="cadence" />
                <apex:selectList value="{!selectedCadence}" size="1" id="cadence" >
                    <apex:selectOptions value="{!cadenceOptions}" />
                    <apex:actionSupport event="onChange" action="{!updateFieldVisibility}" reRender="editForm" />
                </apex:selectList> 
            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem helpText="Checking this box will allow data refreshes on the weekend at 5:00 PM">
                <apex:outputLabel value="Weekend Refresh" for="weekendRefresh" />
                <apex:inputCheckbox id="weekendRefresh" />
            </apex:pageBlockSectionItem>

        </apex:pageBlockSection>

        <apex:pageBlockSection columns="1" id="additionalFields">
            <apex:pageBlockSectionItem rendered="{!isShowRefreshWeekday}">
                <apex:outputLabel value="Weekday to Refresh" for="weekdayRefresh" />
                <apex:selectList value="{!selectedWeekdayRefresh}" size="1" id="weekdayRefresh">
                    <apex:selectOptions value="{!weekdayRefreshOptions}"></apex:selectOptions>
                </apex:selectList>
            </apex:pageBlockSectionItem>

            <apex:pageBlockSectionItem rendered="{!isShowRefreshTime}">
                <apex:outputLabel value="Refresh Time" for="refreshTime" />
                <apex:input type="time" value="{!refreshTime}" id="refreshTime"/>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
        </apex:actionRegion>

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

Here's some of my Apex Controller :

public class ConnectorHomeTabController {

public String selectedCadence {get; set;}
public String selectedWeekdayRefresh {get; set;}
public Time refreshTime {get; set;}
public Boolean isShowRefreshTime {get; set;}
public Boolean isShowRefreshWeekday {get; set;}

public Higi_ConnectorHomeTabController () {
    isShowRefreshTime    = false;
    isShowRefreshWeekday = false;
}

/**
 * Returns the select option list of cadence preferences 
 **/
public List<SelectOption> getCadenceOptions() {
    List<SelectOption> cadenceOptions = new List<SelectOption>();
    cadenceOptions.add(new selectOption('','No cadence specified'));
    cadenceOptions.add(new selectOption('Daily','Daily'));
    cadenceOptions.add(new selectOption('Manually','Manually'));
    cadenceOptions.add(new selectOption('Monthly','Monthly'));
    cadenceOptions.add(new selectOption('Realtime','Real-time'));
    cadenceOptions.add(new selectOption('Weekly','Weekly'));
    return cadenceOptions;
}

/**
 * Returns the select option list of weekdays 
 **/
public List<SelectOption> getWeekdayRefreshOptions() {
    List<SelectOption> weekdays = new List<SelectOption>();
    weekdays.add(new selectOption('','No weekday specified'));
    weekdays.add(new selectOption('Mon','Monday'));
    weekdays.add(new selectOption('Tue','Tuesday'));
    weekdays.add(new selectOption('Wed','Wednesday'));
    weekdays.add(new selectOption('Thu','Thursday'));
    weekdays.add(new selectOption('Fri','Friday'));
    return weekdays;
}


/**
 * Renders the fields depending on cadence picklist
 **/
public PageReference updateFieldVisibility() {
    if (selectedCadence == 'Monthly') {
        isShowRefreshWeekday = true;
        isShowRefreshTime    = true;
        System.debug('Cadence set to monthly');

    } else if (selectedCadence == 'Weekly') {
        isShowRefreshWeekday = true;
        isShowRefreshTime    = true;
        System.debug('Cadence set to weekly');

    } else if (selectedCadence == 'Daily') {
        isShowRefreshWeekday = false;
        isShowRefreshTime    = true;
        System.debug('Cadence set to daily');
    } else {
        isShowRefreshWeekday = false;
        isShowRefreshTime    = true;
        System.debug('Cadence is realtime or manual');
    }
    return ApexPages.currentPage();
}

}

Answer 1

Case Sensitive (in the few cases when it does matter) gets you every time:

<apex:actionSupport event="onChange" action="{!updateFieldVisibility}" reRender="editForm" />

should be

<apex:actionSupport event="onchange" action="{!updateFieldVisibility}" reRender="editForm" />

Also, per your comments, do not return the pagereference ApexPages.currentPage() as you are essentially reloading the page when you do that. Minimal Reproducible Example

Class

public class myExample{


    public boolean showValue{get;set;}
    public String selectedCadence {get; set;}



    public List<SelectOption> getCadenceOptions() {
        List<SelectOption> cadenceOptions = new List<SelectOption>();
        cadenceOptions.add(new selectOption('','No cadence specified'));
        cadenceOptions.add(new selectOption('Daily','Daily'));
        cadenceOptions.add(new selectOption('Manually','Manually'));
        cadenceOptions.add(new selectOption('Monthly','Monthly'));
        cadenceOptions.add(new selectOption('Realtime','Real-time'));
        cadenceOptions.add(new selectOption('Weekly','Weekly'));
        return cadenceOptions;
    }

    public void updateFieldVisibility() {
        showValue = true;
    }

}

VF Page

<apex:page controller="myExample">


<apex:form id="editForm">
    <apex:pageBlock title="Edit Organization Default Data Access" id="editPageBlock">


        <!-- Cadence specific fields -->
        <apex:actionRegion>
        <apex:pageBlockSection title="Cadence Settings" columns="2">

            <apex:pageBlockSectionItem>
                <apex:outputLabel value="Preferred Cadence" for="cadence" />
                <apex:selectList value="{!selectedCadence}" size="1" id="cadence" >

                    <apex:selectOptions value="{!cadenceOptions}" />
                    <apex:actionSupport event="onchange" action="{!updateFieldVisibility}" reRender="editForm" />
                </apex:selectList> 
            </apex:pageBlockSectionItem>

        </apex:pageBlockSection>

        <apex:pageBlockSection columns="1" id="additionalFields">
            <apex:pageBlockSectionItem rendered="{!showValue}">
                    I am being shown
            </apex:pageBlockSectionItem>

        </apex:pageBlockSection>
        </apex:actionRegion>

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

</apex:page>

On Load

On Select of value

When using onChange the text is not displayed.