Visualforce Remoting Javascript Uncaught Reference Error

Question

Am using the following buttons on visualforce page:

1. input class="buttons" id="forecastButton" type="submit" value="Forecast" onclick="refreshRemoteChart"

2. input class="buttons" id="exitButton" type="submit" value="Exit WF Manager" onclick="exitSite"

in conjuction with the following javascript functions:

    function retrieveChartData(callback) 
   {
         console.log('Hello this is the first test !');

         var fteHoursUserInput = document.getElementById('{!$Component.userOptions.caseInputFields.fteHours}').value;
         var timeToCompleteCaseUserInput = document.getElementById('{!$Component.userOptions.caseInputFields.timeToCompleteCase}').value;

         Visualforce.remoting.Manager.invokeAction(
         '{!$RemoteAction.WorkforceManagerController.getRemotePieData}',
          fteHoursUserInput, timeToCompleteCaseUserInput,
          function(result, event) 
          {
             if(event.status && result && (result.constructor === Array)) 
             {
               callback(result);
               RemotingPieChart.show();
             }
             else if (event.type === 'exception') {
                document.getElementById("remoteResponseErrors").innerHTML = event.message + 
               '<br/>' + event.where;
             }
             else {
                document.getElementById("remoteResponseErrors").innerHTML = event.message;
             }                   
          },
          { escape: true }
          );
    }

        function refreshRemoteChart() 
        {
            var statusElement = document.getElementById('statusDisplay');
            statusElement.innerHTML = "loading...";
            retrieveChartData(function(statusElement)
            {
                 return function(data)
                 {
                    RemotingPieChart.reload(data);
                    statusElement.innerHTML = '';
                 };
            }(statusElement)
      );
   }

   function exitSite()
   {
       console.log('Hello this is the second test !');

       Visualforce.remoting.Manager.invokeAction(
          '{!$RemoteAction.WorkforceManagerController.exit}', 
           function(result, event)
           {
                console.log('Hello this is the Antigoni Test !');
           },
           {escape: false}
       );
  }

and in conjunction with the following apex controller methods:

@RemoteAction
public static List<PieWedgeData> getRemotePieData(String fteHoursUserInput, String timeToCompleteCaseUserInput) 
{
    return WorkforceManagerController.generatePieData(fteHoursUserInput, timeToCompleteCaseUserInput);
}

@RemoteAction
public static PageReference exit()
{
    PageReference casesTab = new PageReference('/500/o');
    casesTab.setRedirect(true);
    return casesTab;
}

On the chrome console I am unable to see the console log messages for any of the functions that are invoked when I click the buttons. However the first function works fine and refreshes the chart with new data without producing the message in the console, whereas the second one does not work at all, neither produces the console message, neither redirects me to the Cases tab home. Any ideas?

Thanks in advance

Answer 1

After a lot of digging and trial and error here is the answer to this question:

1. When you put your javascript methods in a static resource, you need to remove the <script> tags at the beginning and end of file. That was the culprit for 'Uncaught Reference error'.

2. On the <input type="submit" onclick="jsFunction();> the javascript method was not called because the tag was inside an tag. This means when somebody clicks that button, the apex form gets submitted first and the javascript function is not called. So removed the type="submit" and made it type="button". The functions were successfully called and I can now see the console.debug().

3. Final step, inside the js static resource, calling the remote visualforce action like that, will not work: {!$RemoteAction.WorkforceManagerController.getRemotePieData}. It will throw an 'Undefined WorkforceManagerController...' error. Instead I put:

WorkforceManagerController.getRemotePieData ( fteHoursUserInput, timeToCompleteCaseUserInput, function(result, event) { if(event.status) { RemotingPieChart.reload(result); RemotingPieChart.show(); } }, { escape: true } );

and it worked just fine.