actionSupport rerender not working as expected

Question

I have the below code and I am trying to make the Call_Outcome__c field required based on what value was selected for Type field:

<apex:pageBlockSectionItem>
    <apex:outputLabel value="Type" for="taskTypeIdOne"></apex:outputLabel>
    <apex:actionRegion>
        <apex:inputField value="{!taskObjOne.type}" required="TRUE" id="taskTypeIdOne">
            <apex:actionSupport event="onChange" reRender="taskOneCallOutcomeOPPanelId"/>
        </apex:inputField>
    </apex:actionRegion>                
</apex:pageBlockSectionItem>

<apex:pageBlockSectionItem>
    <apex:outputLabel value="Call Outcome" for="taskOneCallOutcomeId"/>
    <apex:outputPanel id="taskOneCallOutcomeOPPanelId">
        {!taskObjOne.type} <!-- This always displays call on the UI-->
        <apex:inputField value="{!taskObjOne.Call_Outcome__c}" 
                        required="{!IF(taskObjOne.type =='Call',"TRUE","FALSE")}" 
                        id="taskOneCallOutcomeId"/>              
    </apex:outputPanel>
</apex:pageBlockSectionItem>

Call_Outcome__c field is always displayed as required irrespective of what I select for Type field and the {!taskObjOne.type} component inside the outputpanel always displays the initial value of type field on page load.

What is wrong with this code?

Answer 1

I got something similar to work in my org just by making the event name all lower-case:

<apex:actionSupport event="onchange"  reRender="taskOneCallOutcomeOPPanelId"/>

Answer 2

The problem is that "onChange" is to be specified as "onchange" as javascript is case-sensitive.

Change your code as:-

<apex:actionSupport event="onchange" reRender="taskOneCallOutcomeOPPanelId"/>

Answer 3

Try removing the actionRegion tags so that this:

<apex:pageBlockSectionItem>
    <apex:outputLabel value="Type" for="taskTypeIdOne"></apex:outputLabel>
    <apex:actionRegion>
        <apex:inputField value="{!taskObjOne.type}" required="TRUE" id="taskTypeIdOne">
            <apex:actionSupport event="onChange" reRender="taskOneCallOutcomeOPPanelId"/>
        </apex:inputField>
    </apex:actionRegion>                
</apex:pageBlockSectionItem>

Becomes this:

<apex:pageBlockSectionItem>
    <apex:outputLabel value="Type" for="taskTypeIdOne"></apex:outputLabel>
    <apex:inputField value="{!taskObjOne.type}" required="TRUE" id="taskTypeIdOne">
        <apex:actionSupport event="onChange" reRender="taskOneCallOutcomeOPPanelId"/>
    </apex:inputField>
</apex:pageBlockSectionItem>

I suggest this based on my own experience with actionregions affecting updates like these, and based on sfdcfox's words from <apex:actionregion> understanding (emphasis mine):

If you have identified a use for an Action Region, you must also be prepared to use reRender, because the two work hand-in-hand. When you do not use a reRender attribute, the entire page state is submitted and validated before attempting to run any controller logic. Using the Action Region will restrict validation to just that section of the page, but also usually prevents updates from occurring outside the action region area.