Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
BroncoBoyBroncoBoy 

Executing method within a Visualforce extension using Javascript on a Visualforce page

My Visualforce page has an extension has a public method: TopOneHundred();  which returns a JSON string.  Though there are ways to execute the class method using Javascript, I'm not sure how to obtain the returned JSON string for use in my Javascript. The TopOneHundred() method uses other variables from the extension in order to return the correct string.  This is done because the user is interacting with some picklists on the VF page and we're executing the TopOneHundred() method using the picklists choices. 

Because of this, I can't use Javascript remoting nor can I use the AJAX toolkit/sforce.apex.execute method because both require static keywords and the instance variables are not visible to static methods.  I'm greatful for any advice.

FYI The JSON string is used to populate a Datatables  (https://datatables.net/" target="_blank) table on the VF page.
 
Best Answer chosen by BroncoBoy
ClintLeeClintLee
Since you're dependent on the user's picklist selections, could you do the following?

1.  Put the logic that returns the JSON string into a static @RemoteAction method that accepts the picklist value(s) as parameters.
2.  Grab the picklist values using javascript and pass them into the method using Javascript remoting.  

 

All Answers

ClintLeeClintLee
Since you're dependent on the user's picklist selections, could you do the following?

1.  Put the logic that returns the JSON string into a static @RemoteAction method that accepts the picklist value(s) as parameters.
2.  Grab the picklist values using javascript and pass them into the method using Javascript remoting.  

 
This was selected as the best answer
ClintLeeClintLee
As an example:
  
@RemoteAction
public static String topOneHundred(String picklistValue1, String picklistValue2)
{
    String jsonString = '';

    // execute the logic using picklistValue1 and picklistValue2

    return jsonString;
}

 
BroncoBoyBroncoBoy
I think your suggestion is the correct way to go - so thank you.  I've spent the day re-coding topOneHundred to work via remoting.
The only remaining issue that isn't working is getting the picklist values into the javascript.  Here's my html/javscript:

HTML:
<input type="button" value = "UpdateBC" name="broccoli" id="brocs"  onclick="callActionMethodB(); return false;"/><br />

Javascript:
function callActionMethodB()
{
    // Javascript Remoting Method
    MyVisualforcePageExtension.staticTopOneHundredMethod('{!SelectedCostCenter}', '{!SelectedUserChannel}', '{!recordTypesIds}', handleContacts);
    console.log('cc = ' + {!SelectedCostCenter} + ' uchan = ' + '{!UserChannel}' + ' rTypes = ' + '{!recordTypesIds}');
}

However when I click the button, the console log doesn't reflect the values of  {!SelectedCostCenter} or '{!UserChannel}'  etc.

Any thoughts? Thanks for your help again!

Here's the apex code for the picklist:

public String SelectedCostCenter = '';
public String getSelectedCostCenter()
{
        return SelectedCostCenter;
}    
 public void setSelectedCostCenter(String usrCC)
  {
        this.SelectedCostCenter = usrCC;
  }

And the VF code:

<apex:selectList id="ccMulti" value="{!SelectedCostCenter}" size="1">
   <apex:selectOptions value="{!UsersCostCenters}" />
 </apex:selectList>
ClintLeeClintLee
In your VF page add a unique styleClass attribute to each of your <apex:selectList> tags.

For example, 

1.  <apex:selectList styleClass="cost-center" value="{!SelectedCostCenter}" size="1">

2.   <apex:selectList styleClass="user-channel" value="{!UserChannel}" size="1">

3.  <apex:selectList styleClass="record-type" value="{!recordTypeIds}" size="1">

Then, in your javascript method, you should be able to access the picklist values like this.
  
function callActionMethodB()
{
    costCenter = document.getElementsByClassName("cost-center")[0];
    userChannel = document.getElementsByClassName("user-channel")[0];
    recordType = document.getElementsByClassName("record-type")[0];
    
    console.log('cc = ' + costCenter.value + ' uchan = ' + userChannel.value + ' rTypes = ' + recordType.value);

    MyVisualforcePageExtension.staticTopOneHundredMethod(costCenter.value, userChannel.value, recordType.value, handleContacts); 
}

 
BroncoBoyBroncoBoy
That worked.  Thank you!