Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Justin DenningJustin Denning 

Changing <apex:SelectList> with jQuery not firing actionSupport event

When a user clicks a link, jQuery updates the <apex:SelectList>.  It update the selectList value, but it does not fire the onchange event.  How do I get the actionSupport event to fire after the link is clicked?

Thanks in advance.

<script>
       $('#HyperlinkContainer').on("click","a", function (e) {

       var option = $(this).attr("data-option");
      $("select[id$='BudgetSelect']").val(option); 

</script>



<div id="HyperlinkContainer">
      <apex:repeat value="{!Budgets}" var="budgetId">
               <a  data-option="{!budgetId}"></a>
       </apex:repeat>
</div


 <apex:selectList size="1" id="BudgetSelect" value="{!Budget.Id}">               < apex:actionSupport event="onchange" action="{!DoNothing}"  rerender="BudgetPanel"    />
              <apex:selectOptions value="{!budgetOptions}"/>
                  
                    
              </apex:selectList>
          <apex:outputPanel id="BudgetPanel" > {!selectedBudget} 

                                         </apex:outputPanel>

 
Best Answer chosen by Justin Denning
Alain CabonAlain Cabon
Hi,

The workaround is to use: <apex:actionFunction>.

<apex:actionFunction name="AJAXRefresh" action="{!DoNothing}" rerender="BudgetPanel" status="myStatus1"/>

and the new javacript call:  AJAXRefresh();​


VFP: 
<apex:page controller="TestJQuery">
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <apex:form>
        <apex:actionStatus id="myStatus1" startText="Please Wait..." StopText="Ready, select a value!" />
        <div id="HyperlinkContainer">
            <apex:repeat value="{!Budgets}" var="budgetId">
                <a  data-option="{!budgetId}">{!budgetId}</a>
            </apex:repeat>
        </div>
        <apex:actionFunction name="AJAXRefresh" action="{!DoNothing}" rerender="BudgetPanel" status="myStatus1"/>
        <apex:selectList size="1" id="BudgetSelect" value="{!BudgetSelected}" onchange="AJAXRefresh()">               
            <!--apex:actionSupport event="onchange" action="{!DoNothing}"  rerender="BudgetPanel"    /-->
            <apex:selectOptions value="{!budgetOptions}"/>             
        </apex:selectList>
        <apex:outputPanel id="BudgetPanel" >Value selected: {!BudgetSelected}          
        </apex:outputPanel>
    </apex:form>
    <script>
    var $j = jQuery.noConflict();
    $j( document ).ready(function() {
        $j('#HyperlinkContainer').on("click","a", function (e) {
            //   alert('test');
            var option = $j(this).attr("data-option");            
            $j("select[id$='BudgetSelect']").val(option); 
            AJAXRefresh();
        });
    });                          
    </script>
</apex:page>

Apex controller: 
public class TestJQuery {
    public List<String> Budgets {get;set;}
    public String selectedBudget{get;set;}
    public String BudgetSelected{get;set;}
    
    public PageReference DoNothing() {
        return null;
    }
    public TestJQuery (){
        Budgets = new List<String>{'item1','item2','item3'};
    }
    public List<SelectOption> getbudgetOptions() {
        List<SelectOption> options = new List<SelectOption>();
        options.add(new SelectOption('item1','item1'));
        options.add(new SelectOption('item2','item2'));
        options.add(new SelectOption('item3','item3'));
        return options;
    }
}

By the way, more people would have helped you here if you have posted more code. I needed to fill the missing parts of your question.