How can I make my VisualForce JavaScript load from a separate page?

Question

Looking at Refreshing Chart Data Using JavaScript Remoting

I'd like to move the script onto a separate page, to make it more maintainable and reusable.

I tried moving the entire script into a static resource, but determined that didn't work because it contains a VisualForce expression.

So, instead, I decided to move the relevant function into a new VisualForce page with contentType="text/javascript":

   <apex:page contentType="text/javascript"  controller="VF_PieChartVFCtrl">
// <script>
    retrieveChartData = function (callback) 
    {
       var year = $("#theYear").val();

       var retrieveCallback = function(result, event) 
       {
           if(event.status && result && (result.constructor === Array)) 
           {
               callback(result);
               RemotingPieChart.show();
           }
           else 
           {
               $("#remoteResponseErrors").text(event.message + ((event.type === 'exception')  ?  ('<br/>' + event.where) : ''));
           }                   
       };

       Visualforce.remoting.Manager.invokeAction ( '{!$RemoteAction.VF_PieChartVFCtrl.getRemotePieData}', year, retrieveCallback , { escape: true } );
    };  
// </script>
</apex:page>

Back on my main page, after including jquery, I try to include it with this:

<apex:includeScript value="{!baseURL}/apex/VF_JavaScriptRetrievePieDataJS" />

My VF Controller includes this:

    private final String BASE_URL = URL.getSalesforceBaseUrl().getHost();
    public String getBaseURL() { return BASE_URL; }

and the includeScript's value renders to:

sledgehammer.eu3.visual.force.com/apex/VF_JavaScriptRetrievePieDataJS

As expected.

But, the chart does not render as expected.

Any ideas what is going wrong and how to fix it?

Answer 1

You can move that Javascript code to a static resource. If you look at the generated content by {!$RemoteAction.VF_PieChartVFCtrl.getRemotePieData} you'll see that is basically something like : <namespace-if-any>.<classname>.<remoting-method> .

So this:

Visualforce.remoting.Manager.invokeAction ( '{!$RemoteAction.VF_PieChartVFCtrl.getRemotePieData}')

Becomes:

Visualforce.remoting.Manager.invokeAction ( 'VF_PieChartVFCtrl.getRemotePieData')

No need to write VF bindings to accomplish that. Just use the string definition of your remoting method.

Making visualforce pages act as Javascript files is not the best.

If something Javascript related does not work, try to post the content of your Javascript console.