I have a VF page with a modal component in it, which gets displayed depending on a button click. There are 2 issues:

  1. I pass a record id to the modal component via a data-attribute, which populates a hidden field on the form. I would like a picklist on the form to be populated using this id, but it's not available at the time the controller loads the form. How can I use this data-attribute in my controller during form load to populate the picklist? Below is the hidden field, the script and further below is the picklist ('periods') in the form.

    <div class="form-group" hidden="true">
       <label for="recId">RecId</label>
       <div class="recId">
           <apex:inputText value="{!recId}"/>

    The script which gets the data-attribute and populates the hidden field:

    <script type="text/javascript">    
    $('#statementModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal          
        var recid = button.data('portacctid')
        var modal = $(this)
        modal.find('.recid input').val(recid)

  2. There are 2 picklists on this same form. When the first picklist (periodTypes) changes, the content of the 2nd picklist (periods) needs to change based on the value selected in the first one. I have an actionSupport on the 1st picklist to rerender an OutputPanel containing the 2nd picklist. I can see in the debug that the code to fill the 2nd picklist runs (I have debug statements), but it doesn't rerender the OutputPanel. What is the problem here?

    <div class="panel-body">
    <div class="row">
        <div class="col-sm-6">Select Period Type</div>
        <div class="col-sm-6">
            <apex:selectList styleclass="form-control" value="{!selectedTypeVal}" size="1"> 
                <apex:selectOptions value="{!periodTypes}" /> 
                <apex:actionSupport event="onchange" reRender="periods" />
    <div class="row">
        <div class="col-sm-6">Select Period</div>
        <div class="col-sm-6">
            <apex:outputPanel id="periods">
                <apex:selectList styleclass="form-control" value="{!selectedVal}" size="1"> 
                    <apex:selectOptions value="{!periods}" /> 

And the main part of my controller:

public class myModalController {
 public Id recId {get;set;}
 public List <SelectOption> periodTypes {get;set;}
 public string selectedTypeVal {get;set;}
 public string selectedVal {get;set;}
 public myModalController(){
    periodTypes = new List<SelectOption>();
    periodTypes.add(new selectOption('--none--','--none--'));        
    periodTypes.add(new selectOption('Quarterly','Quarterly'));        
    periodTypes.add(new selectOption('Annual','Annual'));
    periodTypes.add(new selectOption('Bi-annual','Bi-annual'));  
public List <SelectOption> getperiods() {
    List<SelectOption> periods = new List<SelectOption>();
    periods.add(new selectOption('--none--','--none--'));        
    if(issueId != null){
        issue = [select id, FY_End_Date__c from Issue__c where Id =: issueId limit 1];

        PeriodSelection psel = new PeriodSelection();
        list<string> options = psel.populatePeriodSelection(issue, selectedTypeVal);
         for(string opt : options){
            periods.add(new selectOption(opt,opt));        
    return periods;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.