A blog dedicated to Salesforce Ohana

How to refer VisualForce Elements from jQuery / JavaScript


Normally we use JavaScript with webpages. When we build VisualForce pages, there also we use JavaScript to add functionality. But the way we should refer VisualForce elements from JavaScript is little different. Normally people faces problem while locating the VisualForce elements from JavaScript and sometimes the way people refer VisualForce elements from JavaScript is not the best way to do (which definitely leads to many other problems/issues in future). So in this post, I will go one by one so that we can understand the problem and then we will identify the solutions to overcome that problem. At the end of this post, we will know the best practice. Sounds great, right!!!
I am super excited, so let's start --

Case 1:
Normally a VisualForce page will be converted into HTML by Salesforce. During this conversion process, Salesforce uses a hierarchy to build ID values for page elements. Normally we get the reference of an element by ID in JavaScript in document.getElementById('ID Name'). But if we follow the same in VisualForce page, it will not work. Let's see with an example:

Let's consider the below VisualForce page:
<apex:page id="page">
    <apex:form id="form">
        What is your name?
        <p/>
        <apex:inputText id="name" onfocus="myFunc()"/>
    </apex:form>
    
    <apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
    <script>
        var j$=jQuery.noConflict();
        function myFunc(){
            var inputTextCatched = document.getElementById('name');
            inputTextCatched.value = "Sudipta Deb";
        }
    </script>
</apex:page>
In the above example  document.getElementById('name');will not work and will return no result. The reason behind is that when Salesforce converts the VisualForce page into HTML, the ID is not setup as 'name', rather it is setup by following the page structure. So it will be setup as - 'page:form:name'. So we need to change the above code as - document.getElementById('page:form:name');The final code is given below -
<apex:page id="page">
    <apex:form id="form">
        What is your name?
        <p/>
        <apex:inputText id="name" onfocus="myFunc()"/>
    </apex:form>
    
    <apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
    <script>
        var j$=jQuery.noConflict();
        function myFunc(){
            var inputTextCatched = document.getElementById('page:form:name');
            inputTextCatched.value = "Sudipta Deb";
        }
    </script>
</apex:page>
Now we will see the changes as -

Great!!. But this is definitely not the best practice because if you add a new element in the same page in future, the hierarchy will change and hence the selector will break. So we need to find some better option.

Case 2:
Salesforce recommends the use of $Component selector. The syntax is - document.getElementById('{!$Component.<ID Name>}'). This will traverse the hierarchy and provides the ID. But this also having some problem. This selection will only work at the same hierarchy level as the element.

In the below example when the selection happened at the same level, it worked, but it happened at different level, it failed. Below are to examples-

Working Example -
<apex:page id="page">
    <apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
    <apex:form id="form">
        What is your name?
        <p/>
        <apex:inputText id="name" onfocus="myFunc();"/>
        <script>
            function myFunc(){
                var inputTextCatched = document.getElementById('{!$Component.name}');
                inputTextCatched.value = "Sudipta Deb";
            }
        </script>
    </apex:form>
</apex:page> 
Non working Example -
<apex:page id="page">
    <apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
    <apex:form id="form">
        What is your name?
        <p/>
        <apex:inputText id="name" onfocus="myFunc();"/>
    </apex:form>
    <script>
        function myFunc(){
            var inputTextCatched = document.getElementById('{!$Component.name}');
            inputTextCatched.value = "Sudipta Deb";
        }
    </script>
</apex:page>    
So this approach is having the drawback - If we need to make selections at various hierarchical levels, then we will end up with fragmented JavaScript throughout the code, which is definitely a good solution.

Case 3:
Here comes the great jQuery. jQuery provides partial ID selector that can be used select IDs. The syntax for partial ID selector is -
var inputTextCatched = j$( 'input[id$=name]' ); //Find element with ID ending with name
The advantage here is that it will always find elements even if we change the page hierarchy as long as the id is ending with "name". Another important thing to check here is that I have prefaced the ID selector with input. The reason behind is that by prefacing input, jQuery will search for IDs ending with keyword "name" within HTML tag of type "input". So if you know the type of HTML tag, then it is always better to preface the ID selector with that tag to make the page more efficient.

So now the full code -
<apex:page id="page">
    <apex:form id="form">
        What is your name?
        <p/>
        <apex:inputText id="name" onfocus="myFunc();"/>
    </apex:form>
    <apex:includeScript value="{!URLFOR($Resource.jQuery1_11, '/js/jquery-1.11.2.min.js')}"/>
    <script>
        function myFunc() {
            var j$ = jQuery.noConflict();
            var inputTextCatched = j$( 'input[id$=name]' ); //Find element with ID ending with name
            inputTextCatched.val('Sudipta Deb');
        }
    </script>
</apex:page>    

Great. So with this approach we can keep all our JavaScript code in a single block, rather we can put all our JavaScript code in another file and upload the same as static resource in Salesforce. At the same time, we don't need to think about the page hierarchy.


Thanks and Good Night.

Share:

1 comment:

  1. "I very much enjoyed this article.Nice article thanks for given this information. i hope it useful to many pepole.php jobs in hyderabad.
    "

    ReplyDelete

Follow Me

Enter your email address:

Delivered by FeedBurner

Popular Posts

Labels

Salesforce (101) Apex (43) admin (27) ADM (20) visualforce (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) SOAP (13) tutorial (11) Certification. (9) lightning (8) Trigger (7) test class (7) unit testing (7) design pattern (6) report (6) security (6) trailhead (6) Advanced Admin (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) developer (5) formula (5) javascript (5) mobile (5) salesforce release (5) service cloud (5) solution management (5) use case (5) JSON (4) Lightning Experience (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) Advanced Apex (3) Certification (3) Live Chat (3) Performance (3) Products (3) Sales Cloud (3) Study Notes. (3) Summer15 (3) Tips (3) dynamic apex (3) event (3) license (3) map (3) mapbox (3) singleton (3) version controlling (3) Bulkify (2) Data Architecture and Management Certification (2) Distributed Version Controlling (2) Eclipse (2) Einstein (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) IBM (2) Kitchener Developer Group (2) Lightning Design System (2) Live Agent (2) Metadata (2) Online Event (2) Opportunity (2) Price Book (2) REST (2) SOSL (2) Salesforce DX (2) Scratch Org (2) Spring 15 (2) Summer17 (2) ant (2) automation tool (2) basic (2) chatter (2) coding (2) communication (2) console (2) controller (2) documentation (2) flow (2) git (2) jquery (2) logging (2) permission (2) process builder (2) release (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Agent Productivity (1) Analytics (1) Architect (1) Asynchronous callout (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Classic (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) Custom Metadata (1) Custom Object (1) Decorator Design Pattern (1) Diwali (1) Email (1) Enterprise Territory Management (1) FSC (1) Goals (1) Groups (1) Guide (1) Household (1) Ideas (1) Implicit Sharing (1) Improvement (1) JourneyToCTA (1) KPIs (1) Kitchener User Group (1) Large Data Volume (1) LastModifiedDate (1) Metrics (1) Omni-Channel (1) Person Account (1) Photo (1) Platform Developer I (1) Presentation (1) Product Schedule (1) Profile (1) Public Site (1) Query Plan (1) QuickReference (1) Reports (1) Retrieve (1) Role (1) SFDX (1) Salesforce Optimizer (1) Session (1) Sharing (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Switch (1) SystemModStamp (1) Territory (1) Users (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) configuration (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) dreamforce (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) object (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Blog Archive

Total Subscribers

Total Pageviews