Javascript onChange event For An <apex:selectList> - El Toro - Find articles about Visualforce, Apex, Force.com and Salesforce in general

Print Preview

Javascript onChange event For An <apex:selectList>

When the selected value for a changes, you can update your page using either or . this code demonstrates both techniques:

<apex:page controller="aaPage47">
    <apex:form id="TheForm">
        <!-- Action Function -->
        <apex:actionFunction name="AJAXRefresh" action="{!Dummy}" rerender="TheForm" status="myStatus1"/>
        <apex:selectList value="{!MyValue1}" onchange="AJAXRefresh();" >
            <apex:selectOption itemValue="Uno" />
            <apex:selectOption itemValue="Dos" />
            <apex:selectOption itemValue="Tres" />
        </apex:selectList>
        
        <!-- ActionSupport -->
        <apex:selectList value="{!MyValue2}" >
            <apex:selectOption itemValue="Uno" />
            <apex:selectOption itemValue="Dos" />
            <apex:selectOption itemValue="Tres" />
            <apex:actionSupport event="onchange" action="{!Dummy}" rerender="TheForm" status="myStatus2" />
        </apex:selectList>
        <p />
        <table>
            <tr>
                <th>Value1:</th>
                <td><apex:actionStatus id="myStatus1" startText="Please Wait..." StopText="{!MyValue1}" /></td>
            </tr>
            <tr>
                <th>Value2:</th>
                <td><apex:actionStatus id="myStatus2" startText="Please Wait..." StopText="{!MyValue2}" /></td>
            </tr>
        </table>
    </apex:form>
</apex:page>

This Visualforce page uses a simple Apex controller:

public class aaPage47 {
    public String MyValue1 { get; set; }
    public String MyValue2 { get; set; }

    public PageReference Dummy() {
        return null;
    }
}

comments powered by Disqus

© El Toro . IT @ 2013
Andrés Pérez