[SalesForce] Passing JavaScript Array to Apex Controller

I'm trying to pass JavaScript array to the Apex controller to save it in the Salesforce. First of all I'm unable to use Array or List in the controller, it gives type mismatch kind of error. Which says can't assign string to Array or List. Below is my code.

It isn't even printing text on console using System.debug("Whatever!");

Visualforce

<apex:actionFunction name="userSelectedDates" action="{!saveSelectedDates}" rerender="errors">
      <apex:param name="userSelectedDatesParam" value="" />
</apex:actionFunction>

HTML Select control

<apex:pageBlock title="Calendar" id="calendarBlock">
         <div align="right">
           <select id="selectedDates" ></select>
           <button id="saveCalendar"><span>Save Calendar</span></button> 
         </div>
         <div id="myCalendar"></div> 
</apex:pageBlock>

JavaScript

var backupDates = [];
    var allSelectedDates = [];
        $("#saveCalendar").click(function () {
            backupDates = document.getElementById('selectedDates').options;
            for(var k=0; k<backupDates.length; k++){
                allSelectedDates.push(backupDates[k].text);
                console.log("Dates Backup : "+backupDates[k].text);
            }
            console.log(allSelectedDates);
            userSelectedDates(allSelectedDates);
        });

Apex Controller

public with sharing class EventsPageController {

    public Event__c Event {get; set;}
    private String thisCalendarDates {get;set;}

    public PageReference saveSelectedDates(){
        String selectedDates;
        thisCalendarDates = ApexPages.currentPage().getParameters().get('userSelectedDatesParam');
        System.debug('thisCalendarDates'+thisCalendarDates);
        System.debug(System.now());
     return null;
    }
}

Best Answer

Try this controller code. 

    public class ActionFunctionCLS {

public void IWantToDebug() {
    list<String> ls = ( List<String> )JSON.deserialize( Apexpages.currentPage().getParameters().get('node'), List<string>.class ) ;        
    System.debug('======================= ' + ls[0] );
    System.debug('======================= ' + ls[1]);
    System.debug('======================= ' + ls[2]);                
}

}

And VF like:

<script type="text/javascript">
    function doSave(node){
        var arr = ["foo", "bar", "baz"];
        paraFunction(JSON.stringify(arr));
    }       
</script>

<apex:form >
    <apex:actionFunction name="paraFunction" action="{!IWantToDebug}" rerender="view">      
         <apex:param id="anode" name="node" value="" />
   </apex:actionFunction> 
</apex:form>

 <input type="button" onclick="doSave();" value="test" />

Related Topic