JavaScript in Visualforce Tips and Trics

Visualforce developers can produce a whole lot of JavaScript without ever actually writing a single line of it by making use of built-in features like apex:commandButton, apex:actionFunction, etc. However, it is becoming more commonplace for Visualforce developers to write their own custom JavaScript or entire applications that are largely JavaScript-centric.

JavaScript is very different to what you’ve been used to, and figuring out why the following code executes immediately and then throws ‘Uncaught ReferenceError: example is not defined’ could take a while.

These are some basic tips which you can follow…..

Learn JavaScript

Being client-side, JavaScript is now your friend. Whether you like it or not, this late adolescent-aged technology is now the “glue” that binds everything together on the client-side. JSON is now the data exchange format of choice.

JavaScript has been in use for a while now, and I’ll be surprised if a Salesforce developer has made their way this far using Visualforce without a little JavaScript dabbling. The lightning framework utilises JavaScript, given that JavaScript provides client-side web interactivity.

Store Javascript file in Static Resources

The easiest way to manage your Javascript static resources is to upload them as a single file and then import them. This is fast and easy to update new versions of files. The downside of this is you end up with lots of static resources in your org and it can be quite painful to manage. After creating your static resource, you can include it in your Visualforce by using the includeScript tag

<apex:includeScript value=”{!$Resource.js_jquery}” />

The first method is great if your page only needs a single resource or you ok with having a common version of Javascript file throughout your all of your pages, but most applications have multiple Javascript files per page. If you want to compartmentalize every application so that you can update Javascript versions without affecting other applications. To do this, you’ll want to create a zip file with your files in it (just remember your folder structure) and upload it as a static resource. Then you can include it in your Visualforce by using the includeScript tag again

<apex: includeScript value=”{!URLFOR($Resource.MyAppResources, ‘js/jquery.min.js’)}” />

USE REMOTE ACTION

There are lots of way to push and pull data to Salesforce with Javascript. But I would recommend using Remote Actions whenever possible. The reasoning behind this is that you have the tight binding to the data model that Apex provides as well as the extra assurance provided by Apex testing. By moving most of your logic back into Apex, you don’t have to worry as much about setting up new processes for testing your Javascript.

USE THE $COMPONENT VARIABLE

While I typically use the jQuery trick above, sometimes you need to pass the id of a field to a method and you can’t use jQuery to get it. In that case you can use the $Component variable to inject the richfaces id.
<apex:outputPanel onclick=”jsMethod(‘{!$Component.thePanel}’)” id=”thePanel”>Text</apex:outputPanel>

Learn From Community

There are lot of people out there who can help you with this. Get help from them. You can also ask in community where people are eager to help you.

Last but not the least, go to trailhead and start learning about this particular topic. Trailhead will definately help you to get familiar with this.