Do not VisualForce JavaScript onChange and actionSupport work together?

Question

It seems like you can't use VisualForce JavaScript onChange and actionSupport together, because if you use onChange property on inputField then actionSupport onChange wouldn't work.

There is here my page

<apex:page controller="requiredCont">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
    function setTitleToValue(el) {
        el.title = el.options[el.selectedIndex].text;
    }
</script> 

<apex:form >
    <apex:pageBlock >
        <apex:pageBlockButtons >
            <apex:commandButton value="Save"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection >
            <apex:actionRegion >
                <apex:selectList size="1" value="{!someAccount.Name}" title="{!someAccount.Name} - {!someAccount.Name}X" onchange="javascript:setTitleToValue(this)">
                    <apex:selectOptions value="{!names}"/>
                    <apex:actionSupport event="onchange" action="{!checkRequired}" reRender="otherFieldRequired" />
                </apex:selectList>
            </apex:actionRegion>
            <apex:outputPanel id="otherFieldRequired">
                <apex:inputField value="{!someAccount.Site}" id="dependentField" required="{!isRequired}"/>
            </apex:outputPanel>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>
</apex:page>

and my controller for this page

public class requiredCont {

public List<SelectOption> names{
    get{
        if (names == null) {
            List<SelectOption> optionList = new List<SelectOption>();
            optionList.add(new SelectOption('a', 'a - aX'));
            optionList.add(new SelectOption('A', 'A - AX'));
            optionList.add(new SelectOption('B', 'B - BX'));
            optionList.add(new SelectOption('C', 'C - CX'));
            names = optionList;
        }
        return names;
    }
    private set;

}

public static Set<String> requiredPicklistValues = new Set<String> { 'A', 'B', 'C' };
public Account someAccount { get; set; }

public boolean isRequired  {get;set;}{isRequired=false;}

public PageReference checkRequired(){
    isRequired = requiredPicklistValues.contains(someAccount.Name);
    System.debug(LoggingLevel.ERROR, '@@@@ isRequired:' + isRequired );
    return null;
}
public requiredCont() {
    someAccount = new Account(Name = 'a');
}
}

I have both actionSupport and onChange property of apex:selectList.

If onChange property of apex:selectList is present then actionSupport doesn't work. If I remove it then actionSupport works well.

So this is a question and a problem: how could we make both of them work?

Answer 1

Finally I came up with the following solution.

I use actionFunction instead of actionSupport and call it from JavaScript onChange handler.

<apex:page controller="requiredCont">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
    function setTitleToValue(el) {
        el.title = el.options[el.selectedIndex].text;
        checkReq();
    }
</script> 

<apex:form >
    <apex:pageBlock >
        <apex:pageBlockButtons >
            <apex:commandButton id="update"  value="Save"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection >
            <apex:actionRegion >
                <apex:actionFunction name="checkReq" action="{!checkRequired}" reRender="otherFieldRequired"/>         
                <apex:selectList size="1" value="{!someAccount.Name}" title="{!someAccount.Name} - {!someAccount.Name}X" onchange="javascript:setTitleToValue(this)">
                    <apex:selectOptions value="{!names}"/>
                </apex:selectList>
            </apex:actionRegion>
            <apex:outputPanel id="otherFieldRequired">
                <apex:inputField value="{!someAccount.Site}" id="dependentField" required="{!isRequired}"/>
            </apex:outputPanel>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

public class requiredCont {

public List<SelectOption> names{
    get{
        if (names == null) {
            List<SelectOption> optionList = new List<SelectOption>();
            optionList.add(new SelectOption('a', 'a - aX'));
            optionList.add(new SelectOption('A', 'A - AX'));
            optionList.add(new SelectOption('B', 'B - BX'));
            optionList.add(new SelectOption('C', 'C - CX'));
            names = optionList;
        }
        return names;
    }
    private set;

}

public static Set<String> requiredPicklistValues = new Set<String> { 'A', 'B', 'C' };
public Account someAccount { get; set; }

public boolean isRequired  {get;set;}{isRequired=false;}

public PageReference checkRequired(){
    isRequired = requiredPicklistValues.contains(someAccount.Name);
    System.debug(LoggingLevel.ERROR, '@@@@ isRequired:' + isRequired );
    return null;
}
public requiredCont() {
    someAccount = new Account(Name = 'a');
}
}