Passing values using actionfunction with javascript not working

Question

I'm trying to filter a page based on two dates, this is my current actionFunction:

<apex:actionFunction action="{!modifySoQLBasedOnNewDataRange}" name="passDateValues" status="loadingDiv">
<apex:param name="fromParam" value="" ></apex:param>
<apex:param name="toParam" value="" ></apex:param>

Here is my javascript:

   $(function () {

   $('#from').datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function(selectedDate){
            $('#to').datepicker("option", "minDate", selectedDate);
        }
   });

   $('#to').datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onClose: function(selectedDate){
            $('#from').datepicker("option", "maxDate", selectedDate);
        }
   });
   console.log('Datepicker configuration loaded successfully');

   /*setting Default jQuery Dates*/
   $('#from').datepicker('setDate', '0');
   $('#to').datepicker('setDate', '+90d');
   console.log('Datepicker default dates loaded successfully');


   /*jQuery to handle filter Click*/
   $("#filterButton").click(function(){
        passDateValues($('#from').val(), $('#to').val());
        console.log('Filter Button click event got fired');
        console.log('Parameters Passed: ' + 'From: ' + $('#from').val() + '  To: ' + $('#to').val());
   }); 

On the console, the values in the from and to fields are being passed when the filter button is clicked, however when the page reloads, the debug console is showing the two values reverting to their default values and being used in the query instead of the new values. Code from my controller constructor below:

public date fromParam {get;set;}
public date toParam {get;set;}
public Controller(){
fromParam = System.today();
toParam = System.today() + 90; }

Lastly, the method which is called in the action function:

public PageReference modifySoQLBasedOnNewDataRange(){

system.debug('Date values before logic: ' + Apexpages.CurrentPage().getParameters().get('fromParam') + ' : ' + String.valueOf(fromParam));

if(Apexpages.CurrentPage().getParameters().get('fromParam') != '') {
  Apexpages.CurrentPage().getParameters().put('fromParam', String.valueOf(fromParam));
}else{
  fromParam = System.today();
  Apexpages.CurrentPage().getParameters().put('fromParam', String.valueOf(fromParam));
}

if(Apexpages.CurrentPage().getParameters().get('toParam') != ''){
  Apexpages.CurrentPage().getParameters().put('toParam', String.valueOf(toParam));     
}else{
  toParam = System.today() + 90;
  Apexpages.CurrentPage().getParameters().put('toParam', String.valueOf(toParam));     
}

The query then begins being built after this to grab the list of opportunities. Any thoughts or help?

Answer 1

I think you might have an easier time if you actually use bindings to assign those values instead of passing them through the page parameters. Change your apex:params to say <apex:param name="fromParam" value="" assignTo="{!fromParam}" />, add a rerender to the apex:actionFunction, and change the references in your Ctrl to actually use its fromParam and toParam properties instead of pulling them from pageref.