Visualforce Remoting: Parameter length does not match remote action parameters: expected 1 parameters, got

Question

Just configured a new methode in a visualforce page trying to write a variable (ID) from the VisualForce page to the Apex Controller. Console is providing me the following error

Visualforce Remoting: Parameter length does not match remote action parameters: expected 1 parameters, got

Already found a couple of others which encountered this issue, and the solutions varies per project which it encounters.

What is exactly wrong in this code prohibiting it from executing?

VisualForce page:

Window.onload = function loadPage() {
      var pageRecordId = '{!$CurrentPage.parameters.Id}';
      alert(pageRecordId);
  }

The alert is providing me the correct Id. So this method is working well.

Apex Controller:

global with sharing class BudgetGraphController {
global string pageRecordId {get;set;}
@RemoteAction global static List<Budget__c> getBudgetData(string pageRecordId){
List<Budget__c> bdgtGroupListTotal = [Select Project__r.Id, Date__c, Budget_Total__c, Expense_Expected__c From Budget__c WHERE Project__r.Id =: pageRecordId ORDER BY Timing__c ASC];
return bdgtGroupListTotal;}

Method calling the RemoteAction

    // Draw Google chart
function drawTotalChart() {
    //Call remote action method
    BudgetGraphController.getBudgetData(function (result, event) {
        dataTableArray = [];
        var datacolumn = [{label:'Timing', type:'string'}, 
                          {label:'Budget', type:'number'},
                          {label:'Expens/expect', type:'number'}];
        dataTableArray.push(datacolumn);
        //Create the data table
        for(i= 0 ; i < result.length ; i++) {
            var datatableRow = [result[i].Date__c, result[i].Budget_Total__c, result[i].Expense_Expected__c];
            dataTableArray.push(datatableRow);
        }

        var data = google.visualization.arrayToDataTable(dataTableArray);
        var options = {
            title: 'Total',
            focusTarget:'category',
            curveType: 'function',
            lineWidth: 0.75,
            legend: { position: 'bottom' },
            pointSize: 1,
             chartArea: {'width': '80%', 'height': '80%'},
            vAxis: { 
                format:'€',
                minValue: 0,
                viewWindow:{min: 0} 
            },
             hAxis: {
                   slantedText:true,
                   slantedTextAngle:90,
                    },
            crosshair:{
                trigger:'none',
                opacity:0.5,
                }
        };
        var chart = new google.visualization.LineChart(document.getElementById('Total_chart'));
        chart.draw(data, google.charts.Line.convertOptions(options));
    }, { escape: true });
}

Many thanks for providing me some more insight!

Answer 1

The total number of parameters you need to use in JavaScript will be the number of Apex parameters plus one for the callback. You neglected to include the required parameter, hence the error. The following change would suffice:

BudgetGraphController.getBudgetData('{!JSENCODE($CurrentPage.paramEters.Id)}', function (result, event) {

Note that:

global string pageRecordId {get;set;}

Is unused and unnecessary for the @RemoteAction to work.

The temporary variable is unnecessary. Note also that __r.Id is not recommended; use __c instead for performance reasons:

return [Select Project__c, Date__c, Budget_Total__c, Expense_Expected__c From Budget__c WHERE Project__c = :pageRecordId ORDER BY Timing__c ASC];

Finally, also note that this is always a Bad Idea:

Window.onload = function loadPage() {

Because Visualforce has its own onload handler that must also load or you can expect unusual behavior. Use window.addEventListener instead:

window.addEventListener('domcontentloaded', function() {
   // ... //
});