{"id":2649,"date":"2012-01-19T13:53:53","date_gmt":"2012-01-19T08:23:53","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2649"},"modified":"2012-01-19T13:53:53","modified_gmt":"2012-01-19T08:23:53","slug":"get-dom-elementid-of-the-visualforce-components","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-dom-elementid-of-the-visualforce-components\/","title":{"rendered":"Get DOM ElementID of the Visualforce components"},"content":{"rendered":"

This article will focus on getting generated dom element Id in Visualforce.
\nLet’s consider below code snap:<\/p>\n

\n<apex:page>\n<apex:form id="frm">\nEnter Value 1 :\n<apex:inputText id="txt1" \/>\n<\/apex:form>\n<\/apex:page>\n<\/pre>\n
If you want to get the id of “apex:inputText”\u009d<\/strong> in javascript like belowCode<\/p>\n
\nVar fld =  document.getElementById(\"\u02dctxt1');\n<\/pre>\n
It will NOT<\/strong> work.
\nBecause its actual id will be something like “j_id0:frm:txt1<\/em>“\u009d.<\/p>\n
To get the Actual id in Visualforce page we have to use below line of code:<\/p>\n
\nVar fld =  document.getElementById("{!$Component.txt1}");\n<\/pre>\n
As you can see, we have to use below Syntax:<\/p>\n
{!$Component.fieldId}<\/p><\/blockquote>\n
Case 1:<\/strong>
\nHowever there is one catch. If the element is present at several levels where Parents also have the Id then you have to write code like:<\/p>\n
\n{!$Component.Parent1.Parent2.fieldId}\n<\/pre>\n
Case 2:<\/strong>
\nIf your element is within form tag having no Id like :<\/p>\n
\n<apex:page>\n<apex:form>\nEnter Value 1 :\n<apex:inputText id="txt1" \/>\n<\/apex:form>\n<\/apex:page>\n<\/pre>\n
And you try to get the id like<\/p>\n
\nVar fld =  document.getElementById("{!$Component.txt1}");\n<\/pre>\n
It will NOT<\/strong> work.
\nYou must have to give the Id to “apex:form<\/strong>“\u009d element and access it.<\/p>\n
Example Working code:<\/p>\n
\n<apex:page>\n<apex:form id="frm">\nEnter Value 1 :\n<apex:inputText id="txt1" \/>\n<\/apex:form>\n<\/apex:page>\n<\/pre>\n
Get Id by using code:<\/p>\n
\nVar fld =  document.getElementById("{!$Component.frm.txt1}");\n<\/pre>\n
You might face problem in JQuery because of auto generated ID pattern of Salesforce, in that case this article “Handling Colon in Element ID in JQuery \u2013 Visualforce problem”<\/a><\/strong> will come handy.<\/p>\n","protected":false},"excerpt":{"rendered":"
How to get the  DOM ElementID of the Visualforce components in Salesforce<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9,18],"tags":[336],"class_list":["post-2649","post","type-post","status-publish","format-standard","hentry","category-salesforce","category-visualforce","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2643,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/passing-parameter-in-actionfunction-in-visualforce\/","url_meta":{"origin":2649,"position":0},"title":"Passing multiple Parameters in ActionFunction in Visualforce","author":"Jitendra","date":"January 15, 2012","format":false,"excerpt":"Example and Source code of multiple Parameters Parameter in ActionFunction in Visualforce - Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Passing Parameter in ActionFunction in Visualforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/Passing-Parameter-in-ActionFunction-in-Visualforce.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":2649,"position":1},"title":"Salesforce Developers interview questions – Most commonly used code snippets – part 21","author":"Jitendra","date":"July 7, 2015","format":false,"excerpt":"Salesforce interview questions - Most frequently used Apex and visualforce code used by Salesforce developers like \"How to query and abort scheduled job using Apex\", \"Defining VF page as HTML5\", \"Visualforce page as JSON\" , \"Handling colon in element Id for Jquery\" , \"Chatter using Apex\" and many more.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4107,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based\/","url_meta":{"origin":2649,"position":2},"title":"Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based","author":"Jitendra","date":"December 19, 2014","format":false,"excerpt":"You may find many ways to upload attachments in Salesforce using\u00a0visualforce\u00a0however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"HTML5 Drag And Drop File","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2987,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-interview-questions-part-10\/","url_meta":{"origin":2649,"position":3},"title":"Salesforce Interview Questions \u2013 Part 10","author":"Jitendra","date":"August 2, 2012","format":false,"excerpt":"This Part of Salesforce interview question series depict on browser compatibility issue (Internet Explorer 9) and Visualforce normally for AJAX, Group By and Having Clause. 91. How to add the Document Header in Visualforce page? Ans : Directly there is no way to add the document type in visualforce. However\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2470,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/salesforce-tutorial-create-simple-ajax-based-visualforce-page\/","url_meta":{"origin":2649,"position":4},"title":"Salesforce Tutorial – Create Simple Ajax based Visualforce page","author":"Jitendra","date":"October 17, 2011","format":false,"excerpt":"Salesforce Tutorial - Step by step tutorial to create AJAX based application in visualforce page with Apex class","rel":"","context":"In "Web Technology"","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"Simple AJAX demo in salesforce using visualforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/10\/Simple-AJAX-demo-in-salesforce-using-visualforce.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2706,"url":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/handling-colon-in-element-id-in-jquery-visualforce-problem\/","url_meta":{"origin":2649,"position":5},"title":"Handling Colon in Element ID in JQuery – Visualforce problem","author":"Jitendra","date":"February 8, 2012","format":false,"excerpt":"Resolving the JQuery error when the Element ID contains colon with Live Demo","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=2649"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2649\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}