4

I am attempting to count the total number of checkboxes that have been clicked on my page. I have all of the code to determine what's been clicked using JS. I need to pass this number to a controller variable I have in order to properly display this number on the page. I have yet to see any answers to this question. Is there a way to pass a JS var to it's salesforce controller counterpart?

6

Try JS Remoting. You can call a static method from an Apex Class in JS. If a static method is too "rigid", you can get creative with your method by passing multiple parameters, process your information, update appropriate data via DML, and then update your VF page via AJAX or something similar to catch the updated data in your controller. Or you can skip a step and use the Salesforce AJAX Toolkit. But if it's something not too complex, try the following:

Documentation: http://www.salesforce.com/us/developer/docs/pages/Content/pages_js_remoting.htm

Example: http://www.salesforce.com/us/developer/docs/pages/Content/pages_js_remoting_example.htm

My Example: In your Apex Controller, write your function with the @RemoteAction parameter (remember to have global permissions):

global class MyClass{

    public MyClass(){   }//END init

    @RemoteAction global static void myRemoteMethod(integer numBoxesChecked){
        //do something
    }//END myRemoteMethod

}//END Class

On your VF Page, use the following JS:

<script>
    var numBoxesChecked = someValue;

    function myCallbackFunction(){
        //do something with the result
    }

    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.MyClass.myRemoteMethod}', numBoxesChecked, myCallbackFunction);

</script>
4
  • But, this code can't access the controller's data, because you're accessing a static function, which is outside the scope of the controller. – sfdcfox Aug 27 '13 at 15:20
  • That's why I said you have to be creative. :) What you could do is save the controller's data in an object via an instance method and then call that information in your static method for JS remoting. – Scott Pelak Aug 27 '13 at 18:47
  • You could also use the one of Salesforce's apis to alter data right in js salesforce.com/us/developer/docs/api/index.htm – Scott Pelak Aug 27 '13 at 18:50
  • Just making an observation that the poster didn't ask how to modify the database or just call arbitrary code, but specifically to update the controller's view state. The code presented here is perfectly valid for its intended usage, but simply doesn't apply in this context, because it won't allow the poster to reach their intended goal. They could just as well render the entire thing in JavaScript and skip the Apex Code entirely, since the question was about displaying the number of checked boxes. – sfdcfox Aug 27 '13 at 19:11
6

You can access the view state through hidden variables. Consider the following example:

Controller:

public with sharing class bump {
    public integer counter { get; set; }
    public bump() {
        counter = 0;
    }
}

Page:

<apex:page controller="bump">
<script>
function bump() {
    var counter = document.getElementById("{!$Component.form.counter}");
    counter.value = parseInt(counter.value)+1;
    updateState();
}
</script>
    <apex:form id="form">
        <apex:actionFunction name="updateState" reRender="form"/>
        <apex:inputHidden id="counter" value="{!counter}"/>
        {!counter}
        <apex:commandButton value="Bump!" onclick="bump(); return false;" reRender=""/>
    </apex:form>
</apex:page>

This version updates the page's view state (you can verify this yourself), which means that the value is available via Apex Code as a result of the JavaScript call. You could also just pass a named parameter into the actionFunction, like this:

Controller:

public with sharing class actionFn {
    public Integer value { get; set; }

    public void setNewValue() {
        try {
            value = Integer.valueOf(ApexPages.currentPage().getParameters().get('newValue'));
        } catch(exception e) {

        }
    }
}

Page:

<apex:page controller="actionFn">
<script>
function setRandomValue() {
    setNewValue(Math.floor(Math.random()*10000));
}
</script>
    <apex:form id="form">
        <apex:actionFunction name="setNewValue" action="{!setNewValue}" reRender="form">
            <apex:param name="newValue" value=""/>
        </apex:actionFunction>
        {!value}
        <button onclick="setRandomValue(); return false;">Random</button>
    </apex:form>
</apex:page>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.