+ Start a Discussion
Starz26Starz26 

How to pass Paramater using CommandButton - A Tutorial / Lessons learned

I see this question come up often and after having to fight with it again today, I thought I would post a quick quick with tips and tricks:

 

 

What you think should work

 

<apex:commandButton action="{!someAtion}" value="Click Me">
     <apex:param assignTo="{!conVariable}" name="con" id="con" value="123"/>
</apex:commandButton>

 Well, let me tell you, this DOES NOT work.

 

  - Why - A little bug with the command button and param. Commandlink works, but the command button requires something more to get it to set the value of the controller variable.

 

How to fix it

 

 1. Create a hidden output panel on the page, and simply rerender it. This will cause the command button to set the controller vairable as expected.

 

<apex:outputPanel id="hidden" rendered="false"/>

<apex:commandButton action="{!someAtion}" value="Click Me" reRender="hidden">
     <apex:param assignTo="{!conVariable}" name="con" id="con" value="123"/>
</apex:commandButton>

 

Calling Javascript with the button and setting the variable, what you think would work

 

<apex:commandButton onclick="someFunction();" value="Click Me" rerender="hidden">
     <apex:param assignTo="{!conVariable}" name="con" id="con" value="123" />
</apex:commandButton>

 

     Well this does not work either - You need BOTH the action and rerender to be present. Well shucks, I do not want to call the controller, I want to call a jave method....

 

How to make it work

 

1. Add a method to your extenstion / controller

 

public void doNothing(){

   //Do absolutely nothing

}

 2. Modify the button as follows:

 

<apex:commandButton action="{!doNothing}" onclick="someFunction();" value="Click Me" rerender="hidden">
     <apex:param assignTo="{!conVariable}" name="con" id="con" value="123"/>
</apex:commandButton>

 

Bam. The controller variable is set as expected.

 

Why would you use this? Well here was my flow:

 

1. On click of a button I needed to set the value of a controller variable which will be used in a query

2. Before the actual method in the controller ran, I needed to run some java to manipulate the DOM

3. After the method ran, I needed to check the results

 

1: Button -> doNothing -> call Java Function

2. Java Function DOM Stuff -> ActionFunction

3. ActionFunction -> Run Controller method -> onComplete -> Java Function passin in result variable from controller

4. Java Function More DOM Manipulation or Action Function stuff based on result.

 

Hope this helps someone


calvin_nrcalvin_nr

Excellent information. Thanks a lot.

Martha_SenetaMartha_Seneta

You just saved me some heartache.  Thanks!

dennis.mohan1.3964528316647961E12dennis.mohan1.3964528316647961E12
good info thank you.
David Roberts 4David Roberts 4
Thanks Starz26, if you're still around. This five year old post has saved me many hours  (and possibly years) of torment.
I don't fully understand how it works but I was able to refine it to populate my controller variable from a number calculated in java script.
I added and initialised a variable in my controller
public String apexVal {get; set;}
apexVal = '-1';

then used the a button to call my java script to change the java value and pop it into the edit box for the controller variable.

 The code below is a simple page showing the result.

<apex:page docType="html-5.0" standardController="Account" extensions="vwLaunchController">
    
<!-- PassJavaParameterToController
see https://developer.salesforce.com/forums/?id=906F0000000988zIAA --> 


<!-- A simple function for changing the java variable. -->
<script>
    var javaVal;
    javaVal = 50.0;

    function getNewValue(){
        javaVal = 100.0;
        document.getElementById('{!$Component.theForm.theBlock.theSection.showval}').value=javaVal;
    }                                                                                        
</script>


    <apex:form id="theForm">
    <apex:pageBlock id="theBlock" >
    
    <apex:pageBlockSection title="Pass Parameter To Controller" columns="1" id="theSection" >
        <apex:inputText value="{!apexVal}" label="Value:" id="showval" />    
        <apex:outputText label="got from apex:"  value="{!apexVal}" id="gotval"/>
    </apex:pageBlockSection>
    
    <apex:pageBlockButtons id="buttonBlock" location="bottom">          
        <apex:CommandButton action="{!doNothing}" Value="Set a new value using Java: " onclick="getNewValue();" rerender="showval" /> 
        <apex:CommandButton Value="Check value has been captured by controller" onclick="doNothing();" rerender="gotval" /> 
    </apex:pageBlockButtons>
    
    </apex:pageBlock> 
    </apex:form>

 
</apex:page>