3

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

  • I will ask just for the case: should the function call not look like this onclick="refreshRemoteChart();"? – Sergej Utko Mar 12 '15 at 12:16
  • Hi and thanks for your response. I have tried that but it is still not working. In fact it is failing with the exact same error. – Antigoni Mar 12 '15 at 12:23
  • You should check for other errors in the JS console. I think an error happens somewhere before in your code and it prevents another code from running. – Sergej Utko Mar 12 '15 at 12:28
  • There is indeed another error that I can not explain: "Uncaught SyntaxError: Unexpected token <" at the beginning of my script: "<script type="text/javascript"> function retrieveChartData(callback) {.... ". I fail to understand this, the tags are opened and closed all properly, and so are the functions inside the script. I can include the whole script if possible ? – Antigoni Mar 12 '15 at 12:37
  • You may want to look at How do I start to debug my own VF javascript. – crmprogdev Mar 12 '15 at 12:50
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.