{"id":2706,"date":"2012-02-08T00:55:12","date_gmt":"2012-02-07T19:25:12","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=2706"},"modified":"2012-02-08T00:55:12","modified_gmt":"2012-02-07T19:25:12","slug":"handling-colon-in-element-id-in-jquery-visualforce-problem","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/others\/tips\/handling-colon-in-element-id-in-jquery-visualforce-problem\/","title":{"rendered":"Handling Colon in Element ID in JQuery – Visualforce problem"},"content":{"rendered":"

Today i came across very known problem of jQuery and thought of sharing same with everyone. In Salesforce the element id is in the format of “j_id0:j_id3:j_id4:c_txt<\/strong>“. In previous post we have already discussed about getting the elementId in Visualforce<\/a>.
\nWhen i tried to find the element in JQuery like $(‘#j_id0:j_id3:j_id4:c_txt’)<\/strong>, i was getting the error on JavaScript console of the browser. After few searches, i got to know that this is known problem and faced by many of the developers.<\/p>\n

Live Demo<\/a><\/h2>\n

So here i came with few workarounds as follow:<\/p>\n

1. Using Traditional JavaScript:<\/strong>
\nThis was the first option in mind and worked very well. We have to use it very straightforward as always,<\/p>\n

\nvar ele = document.getElementById("abc:xyz");\n<\/pre>\n
2. Using JQuery Approach 1:<\/strong>
\nIn this approach instead of searching by $(“#abc:xyz”), we have to search like<\/p>\n
\nvar ele = $('[id="abc:xyz"]');\n<\/pre>\n
3. Using JQuery Approach 2:<\/strong>
\nUse double slash “\\” in front of colon which will work as escape sequence<\/p>\n
\nvar ele = $("#abc\\:xyz");\n<\/pre>\n
4. Using JQuery and JavaScript both:<\/strong>
\nWe will find the element by traditional JavaScript and then assign it to the JQuery like<\/p>\n
\nvar ele = document.getElementById('abc:xyz');\nele = $(ele).val();\n<\/pre>\n
Complete Source Code demonstrating the scenario:<\/span><\/p>\n
\n<html>\n<head>\n<title>\nHandling Colon in Element ID in JQuery | ShivaSoft\n<\/title>\n<script type="text\/javascript" src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.4\/jquery.js"><\/script>\n<style>\n.myButton {\n\t-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;\n\t-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;\n\tbox-shadow:inset 0px 1px 0px 0px #ffffff;\n\tbackground:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );\n\tbackground:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');\n\tbackground-color:#ededed;\n\t-moz-border-radius:6px;\n\t-webkit-border-radius:6px;\n\tborder-radius:6px;\n\tborder:1px solid #dcdcdc;\n\tdisplay:inline-block;\n\tcolor:#777777;\n\tfont-family:arial;\n\tfont-size:15px;\n\tfont-weight:bold;\n\tpadding:6px 24px;\n\ttext-decoration:none;\n\ttext-shadow:1px 1px 0px #ffffff;\n\tcursor:pointer;\n}.myButton:hover {\n\tbackground:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );\n\tbackground:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');\n\tbackground-color:#dfdfdf;\n}.myButton:active {\n\tposition:relative;\n\ttop:1px;\n}\ncode\n{\n\tcolor:green;\n}\n.error\n{\n\tcolor:red;\n}\n<\/style>\n<\/head>\n<body>\n<input value="ShivaSoft" type="text" size="30" id="abc:xyz" \/> <br \/>\n<input class="myButton" type="button" value="Clear Ans" onclick="clearAns()" \/>\n<br \/>\n\n<input class="myButton" type="button" value="Simple jQuery" onclick="simpleJQuery()" \/>\nUsing &nbsp;&nbsp;&nbsp;<code class="error">$("#abc:xyz")<\/code>\n<br \/>\n\n<input class="myButton" type="button" value="Traditional JS" onclick="simpleJS()" \/>\nUsing &nbsp;&nbsp;&nbsp;<code> document.getElementById("abc:xyz")<\/code>\n<br \/>\n\n<input class="myButton" type="button" value="JQuery-Approach1" onclick="app1()" \/>\nUsing &nbsp;&nbsp;&nbsp;<code>$('[id="abc:xyz"]')<\/code>\n<br \/>\n\n<input class="myButton" type="button" value="JQuery-Approach2" onclick="app2()" \/>\nUsing double slash (Escape sequence) in front of colon &nbsp;&nbsp;&nbsp;<code>$("#abc\\:xyz")<\/code>\n<br \/>\n\n<input class="myButton" type="button" value="JQuery-Approach3" onclick="app3()" \/>\nThis is workaround. Get element by Javascript and pass to jQuery  &nbsp;&nbsp;&nbsp;\n<code>\n<pre>\n\tvar ans = document.getElementById('abc:xyz');\n\tans = $(ans).val();\n<\/pre>\n<\/code>\n<br \/>\n\n<hr \/>\nOutput -\n<div id="divOut" style="background-color:yellow" \/>\n\n<script type="text\/javascript">\n\nfunction app3()\n{\n\tclearAns();\n\tvar ans = document.getElementById('abc:xyz');\n\tans = $(ans).val();\n\tprintAns(ans);\n}\n\nfunction app2()\n{\n\tclearAns();\n\tvar ans = $("#abc\\:xyz").val();\n\tprintAns(ans);\n}\n\nfunction app1()\n{\n\tclearAns();\n\tvar ans = $('[id="abc:xyz"]').val();\n\tprintAns(ans);\n}\n\nfunction simpleJQuery()\n{\n\tclearAns();\n\tvar ans = $("#abc:xyz").val();\n\tprintAns(ans);\n}\n\nfunction simpleJS()\n{\n\tclearAns();\n\tvar ans = document.getElementById("abc:xyz").value;\n\tprintAns(ans);\n}\n\nfunction clearAns()\n{\n\t$("#divOut").html('');\n}\nfunction printAns(ans)\n{\n\tvar ansDiv = $("#divOut");\n\tansDiv.html(ans);\n\tansDiv.css("background-color",randColor());\n}\nfunction randColor()\n{\n    colors = ['orange', '#ccc', 'blue', 'green','yellow','lightGreen']\n    return colors[Math.floor(Math.random()*colors.length)];\n}\n<\/script>\n<\/body>\n<\/html>\n<\/pre>\n
Live Demo<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"
Resolving the JQuery error when the Element ID contains colon with Live Demo<\/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":[26,17,18],"tags":[126,134,336],"class_list":["post-2706","post","type-post","status-publish","format-standard","hentry","category-web","category-tips","category-visualforce","tag-javascript","tag-jquery","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2649,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-dom-elementid-of-the-visualforce-components\/","url_meta":{"origin":2706,"position":0},"title":"Get DOM ElementID of the Visualforce components","author":"Jitendra","date":"January 19, 2012","format":false,"excerpt":"How to get the DOM ElementID of the Visualforce components in Salesforce","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":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":2706,"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":3347,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/ajax-based-autocomplete-component-in-salesforce-using-jquery-ui-and-json\/","url_meta":{"origin":2706,"position":2},"title":"AutoComplete Component in Visualforce using JQueryUI","author":"Jitendra","date":"June 28, 2013","format":false,"excerpt":"In this tutorial, I am going to explain very Simple AJAX and JSON based Auto Complete component with the help of JQuery UI. First I am assuming that you already have Static Resource of named \"AutoCompleteWithModal\"\u009d. This Static resource has all images, CSS and JQuery library needed to implement this\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"JQuery UI and JSON based AJAX AutoComplete Component in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-UI-and-JSON-based-AJAX-AutoComplete-Component-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3355,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/jquery-based-raffle-in-salesforce\/","url_meta":{"origin":2706,"position":3},"title":"JQuery Based Raffle in Salesforce","author":"Jitendra","date":"June 29, 2013","format":false,"excerpt":"Recently i run into very interesting scenario where i had to randomly take name of few contacts. There are many ways to do it but I thought why not to implement this functionality in Salesforce with help of some Javascript? So i came up with this - JQuery based Raffle\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"JQuery Based Raffle in Salesforce","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-Based-Raffle-in-Salesforce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-Based-Raffle-in-Salesforce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/06\/JQuery-Based-Raffle-in-Salesforce.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3762,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-rest-api-playground\/","url_meta":{"origin":2706,"position":4},"title":"Salesforce REST API Playground","author":"Jitendra Zaa","date":"February 25, 2014","format":false,"excerpt":"What is REST API ? In my words, Getting data from Other System or Same System using HTTP request is known as REST API. If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled.\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"REST API playground in Salesforce","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/REST-API-playground-in-Salesforce-1024x362.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3134,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-helptext-like-custom-tooltip-using-jquery\/","url_meta":{"origin":2706,"position":5},"title":"Salesforce Helptext like Custom Tooltip using JQuery","author":"Jitendra","date":"February 4, 2013","format":false,"excerpt":"Welcome back Readers. This is my first blog entry for year 2013, i know its too late. However i can ensure that i have lots of unique post which will come this year. I am starting this year with very light post , mimic the help-text style of Salesforce. Download\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Salesforce like Helptext - Tooltip using JQuery","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2013\/02\/Salesforce-like-Tooltip-using-JQuery.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2706","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=2706"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/2706\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=2706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=2706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=2706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}