+ Start a Discussion
TimJinSDTimJinSD 

custom button Onclick Javascript to get a selected picklist value from modal popup

I have a custom button on my Account object that uses OnClick Javascript to display a modal popup.  Currently in the Javascript, from that modal popup, the "Run Tool" button executes a VF page passing in the Account.Id.  I have a picklist on the modal popup with related Accounts.  What I need to do is pass the related Account Id that is selected in picklist into my Javascript to be able to execute my VF page for whatever Account Id is selected. The Related Account Ids are custom fields on the Account object.  I haven't had any luck finding an example of how to pass the picklist value from the child/modal popup back to the Javascript in the OnClick code.  Is this even possible?

User-added image

OnClick Javascript
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')}
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')}

var j$ = jQuery.noConflict();
try{
  j$(function() {
    /*Append the jQuery CSS CDN Link to the Head tag.*/
    j$('head').append('<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" type="text/css" />');
    
    /*Create the HTML(DIV Tag) for the Dialog.*/
    var html = '<div id="dialog" title="Select account to run"><p>Do you want to go to the Home tab ?</p></div>';
    
    /*Check if Dialog(DIV Tag) already exists if not Append same to the Body tag.*/
    if(!j$('[id=dialog]').size()){
      j$('body').append(html);
    }    

    var iframe_url = '{!URLFOR("/apex/ProductPenetrationPopup?id="+Account.Id )}'
    var tool_url = '{!URLFOR("/apex/ProductPenetration?id="+Account.Id )}'

    /*Open the jQuery Dialog.*/ 
    j$( "#dialog" ).html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
     .dialog({
      autoOpen: true,
      modal: true,
      resizable: false,
      width: 500,
      height: 300,
      show: {duration: 10},
      hide: {duration: 10},
      buttons: {
        "Run Tool": function() {
         window.location = tool_url; /*currently runs Product tool using the Account.ID*/
          j$( this ).dialog( "close" );
        },
        Cancel: function() {
          j$( this ).dialog( "close" );
        }
      }
    });
  }); 
}
catch(e){
alert('An Error has Occured. Error: ' + e);
}

VF Page
<apex:page standardController="Account" showChat="false" sidebar="false" showHeader="false" extensions="ProductPenetrationContExt" title="testing">   
    <apex:form > 
          <apex:pageBlock >
                <apex:pageBlockSection >                       
                      <apex:outputField value="{!Account.Last_Sale_Date__c}" rendered="false"/>                     
                      <apex:outputField value="{!Account.name}"/>
                      <apex:outputField value="{!Account.Customer_ID__c}"/>       
                      <apex:outputField value="{!Account.Winning_Relationship_Number__c}"/>
                      <apex:outputField value="{!Account.Winning_Relationship__c}" rendered="false"/>
                      <apex:outputField value="{!Account.Uplink_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.Uplink_Name__c}"/>
                      <apex:outputField value="{!Account.TL_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.TL_Name__c}"/>
                      <apex:outputField value="{!Account.WA_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.WA_Name__c}"/>
                </apex:pageBlockSection>
         </apex:pageBlock>        
         <apex:pageBlock >
         <apex:pageBlockSection columns="1">
				<apex:pageBlockSectionItem >
					<apex:outputLabel value="Accounts" for="listAccounts"></apex:outputLabel>
					<apex:selectList id="listAccounts" title="Accounts" size="1" multiselect="false">
						<apex:selectOptions value="{!Ids}"></apex:selectOptions>
					</apex:selectList>
				</apex:pageBlockSectionItem>
	     </apex:pageBlockSection>
     </apex:pageBlock>
    </apex:form>   
</apex:page>

Any help would be greately appreciated.

Thanks,

Tim Johnson
Best Answer chosen by TimJinSD
TimJinSDTimJinSD
Thanks for the help SMRPRNBRTH,

What I ended up doing was the following:
1)  In the controller - Add the Account ID to the picklist
//Add picklist to allow users to select the Account to run the Tool
    public SelectOption[] getIds() //https://www.interactiveties.com/blog/2009/visualforce-picklist.php#.U5Xin_ldXVF
    {
        SelectOption[] optionsList = new SelectOption[]{};        
		SelectOption[] options = new SelectOption[]{}; //new list for holding all of the picklist options       
		options.add(new selectOption(accountInstance.id, 'Account Number: '  + accountInstance.Customer_ID__c + ' - ' + accountInstance.name));
        options.add(new selectOption(accountInstance.id, 'TL Number: '  + accountInstance.TL_Number__c + ' - ' + accountInstance.TL_name__c));
        options.add(new selectOption(accountInstance.id, 'Uplink Number: '  + accountInstance.Uplink_Number__c + ' - ' + accountInstance.Uplink_name__c));
        options.add(new selectOption(accountInstance.id, 'WR Number: '  + accountInstance.Winning_Relationship_Number__c + ' - ' + accountInstance.Winning_Relationship__c));
		return options; //return the picklist options        
    }

2)  Delete the onclick Javascript
3)  Modify the Page ProductPenetrationPopUpPage to have the following picklist OnChange java script function. This function will redirect to the Run Tool url when changing the picklist selections on ProductPenetrationPopup page.
<apex:page standardController="Account" showChat="false" sidebar="false" showHeader="false" extensions="ProductPenetrationContExt" title="testing">   
<script type="text/javascript">
function chooseAccount(){
alert(document.getElementById('{!$Component.mainForm.mainBlock.mainSection.mainItem.listAccounts}').value);
window.open('/apex/ProductPenetration?id='+document.getElementById('{!$Component.mainForm.mainBlock.mainSection.mainItem.listAccounts}').value,'_parent');
}
</script>
    <apex:form id="mainForm"> 
          <apex:pageBlock >
                <apex:pageBlockSection >                       
                      <apex:outputField value="{!Account.Last_Sale_Date__c}" rendered="false"/>                     
                      <apex:outputField value="{!Account.name}"/>
                      <apex:outputField value="{!Account.Customer_ID__c}"/>       
                      <apex:outputField value="{!Account.Winning_Relationship_Number__c}"/>
                      <apex:outputField value="{!Account.Winning_Relationship__c}" rendered="false"/>
                      <apex:outputField value="{!Account.Uplink_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.Uplink_Name__c}"/>
                      <apex:outputField value="{!Account.TL_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.TL_Name__c}"/>
                      <apex:outputField value="{!Account.WA_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.WA_Name__c}"/>
                </apex:pageBlockSection>
         </apex:pageBlock>        
         <apex:pageBlock id="mainBlock">
         <apex:pageBlockSection columns="1" id="mainSection">
                <apex:pageBlockSectionItem id="mainItem">
                    <apex:outputLabel value="Accounts" for="listAccounts"></apex:outputLabel>
                    <apex:selectList id="listAccounts" title="Accounts" size="1" multiselect="false" onchange="chooseAccount()">
                        <apex:selectOptions value="{!Ids}"></apex:selectOptions>
                    </apex:selectList>
                </apex:pageBlockSectionItem>
         </apex:pageBlockSection>
     </apex:pageBlock>
    </apex:form>   
</apex:page>

I appreciate you taking the time to reply,

Tim

All Answers

Sameer PrasonnSameer Prasonn
Hey Tim,

I think we can do it via a hiddenfield. here are the steps.
1. set the hiddenfield value from child form
2. retrive the hiddenfield value from parent form. it is very easy.

here i have a code snippit for the same 

1. declare the field in the controller and map it with the hiddenfield.

public String opCode{get; set;}
now use the same field in hiddenfield
<apex:inputHidden value="{!opCode}" id="hf_opCode" />

now we can have some javascript/jquery to get and ret the value on the fly and you are done. hope this resolve your issue. If you need further assistance let me know.

If this post resolve your issue then mark it as best answer to help others.



TimJinSDTimJinSD
Thanks for the help SMRPRNBRTH,

What I ended up doing was the following:
1)  In the controller - Add the Account ID to the picklist
//Add picklist to allow users to select the Account to run the Tool
    public SelectOption[] getIds() //https://www.interactiveties.com/blog/2009/visualforce-picklist.php#.U5Xin_ldXVF
    {
        SelectOption[] optionsList = new SelectOption[]{};        
		SelectOption[] options = new SelectOption[]{}; //new list for holding all of the picklist options       
		options.add(new selectOption(accountInstance.id, 'Account Number: '  + accountInstance.Customer_ID__c + ' - ' + accountInstance.name));
        options.add(new selectOption(accountInstance.id, 'TL Number: '  + accountInstance.TL_Number__c + ' - ' + accountInstance.TL_name__c));
        options.add(new selectOption(accountInstance.id, 'Uplink Number: '  + accountInstance.Uplink_Number__c + ' - ' + accountInstance.Uplink_name__c));
        options.add(new selectOption(accountInstance.id, 'WR Number: '  + accountInstance.Winning_Relationship_Number__c + ' - ' + accountInstance.Winning_Relationship__c));
		return options; //return the picklist options        
    }

2)  Delete the onclick Javascript
3)  Modify the Page ProductPenetrationPopUpPage to have the following picklist OnChange java script function. This function will redirect to the Run Tool url when changing the picklist selections on ProductPenetrationPopup page.
<apex:page standardController="Account" showChat="false" sidebar="false" showHeader="false" extensions="ProductPenetrationContExt" title="testing">   
<script type="text/javascript">
function chooseAccount(){
alert(document.getElementById('{!$Component.mainForm.mainBlock.mainSection.mainItem.listAccounts}').value);
window.open('/apex/ProductPenetration?id='+document.getElementById('{!$Component.mainForm.mainBlock.mainSection.mainItem.listAccounts}').value,'_parent');
}
</script>
    <apex:form id="mainForm"> 
          <apex:pageBlock >
                <apex:pageBlockSection >                       
                      <apex:outputField value="{!Account.Last_Sale_Date__c}" rendered="false"/>                     
                      <apex:outputField value="{!Account.name}"/>
                      <apex:outputField value="{!Account.Customer_ID__c}"/>       
                      <apex:outputField value="{!Account.Winning_Relationship_Number__c}"/>
                      <apex:outputField value="{!Account.Winning_Relationship__c}" rendered="false"/>
                      <apex:outputField value="{!Account.Uplink_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.Uplink_Name__c}"/>
                      <apex:outputField value="{!Account.TL_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.TL_Name__c}"/>
                      <apex:outputField value="{!Account.WA_Number__c}" rendered="false"/>
                      <apex:outputField value="{!Account.WA_Name__c}"/>
                </apex:pageBlockSection>
         </apex:pageBlock>        
         <apex:pageBlock id="mainBlock">
         <apex:pageBlockSection columns="1" id="mainSection">
                <apex:pageBlockSectionItem id="mainItem">
                    <apex:outputLabel value="Accounts" for="listAccounts"></apex:outputLabel>
                    <apex:selectList id="listAccounts" title="Accounts" size="1" multiselect="false" onchange="chooseAccount()">
                        <apex:selectOptions value="{!Ids}"></apex:selectOptions>
                    </apex:selectList>
                </apex:pageBlockSectionItem>
         </apex:pageBlockSection>
     </apex:pageBlock>
    </apex:form>   
</apex:page>

I appreciate you taking the time to reply,

Tim
This was selected as the best answer
Sameer PrasonnSameer Prasonn
Sounds Great Tim. Any other help. you can drop me a line any time.  I will try to help you out. You know solving problem is the best way of learning.

Enjoy the programming.

All the best