Salesforce used in conjunction with JavaScript and Ajax can be pretty smashing. I’ve used a number of JavaScript libraries that make you want to high-five yourself when implemented. There can(and probably will) be some frustration while you bend a library and make it fit within the Salesforce framework, although Ron Hess has some pretty sweet examples for you to pore over.

One simple frustration I’ve come across is that of retrieving elements by Id. Salesforce has an intelligent scheme in place which ensures that HTML elements don’t have duplicate Ids and therefore conform to W3C standards. Consider the following VisualForce page

<apex:page id=”thePage”>

<apex:pageBlock id=”theBlock”>

<apex:outputText id=”theText”  …/>

</apex:pageBlock>

</apex:page>

The generated element Id for the outputText field would be ‘thePage:theBlock:theText’ and not simply ‘theText’. In terms of web-standard conformity this is great, but for the beginner combining JavaScript and VisualForce this can be a nightmare. Imagine you have an outputText field nested ten levels deep within the page. Were you to hardcode the Id of this element within your JavaScript you have to bear the following in mind,

1. Salesforce give elements random Id values if you don’t assign them explicitly. To prevent this you have to assign an Id to each parent element.
2. If you change the page tree structure that precedes said element, you have to change the Id referenced in your JavaScript.

Not the most fun you’ve had, and a lot of hard work if you ask me. Luckily there is a simple solution, and it’s easily maintained as well as flexible. All you have to do is assign the element value to a JavaScript variable just after it appears in the page(or at the same level within the page tree). The code would become

<apex:page id=”thePage”>

<apex:pageBlock id=”theBlock”>

<apex:outputText id=”theText”  …/>

<script> var theText = document.getElementById(“{!$Component.theText}”); </script>

</apex:pageBlock>

</apex:page>

Baddabing baddaboom! Now you can reference the JavaScript variable ‘theText’ from within you JavaScript code and be happy that all that nonsense about hardcoding the Id value is behind you.