Handling Colon in Element ID in JQuery – Visualforce problem

Resolving the JQuery error when the Element ID contains colon with Live Demo

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“. In previous post we have already discussed about getting the elementId in Visualforce.
When i tried to find the element in JQuery like $(‘#j_id0:j_id3:j_id4:c_txt’), 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.

Live Demo

So here i came with few workarounds as follow:

1. Using Traditional JavaScript:
This was the first option in mind and worked very well. We have to use it very straightforward as always,

var ele = document.getElementById("abc:xyz");

2. Using JQuery Approach 1:
In this approach instead of searching by $(“#abc:xyz”), we have to search like

var ele = $('[id="abc:xyz"]');

3. Using JQuery Approach 2:
Use double slash “\” in front of colon which will work as escape sequence

var ele = $("#abc\:xyz");

4. Using JQuery and JavaScript both:
We will find the element by traditional JavaScript and then assign it to the JQuery like

var ele = document.getElementById('abc:xyz');
ele = $(ele).val();

Complete Source Code demonstrating the scenario:

<html>
<head>
<title>
Handling Colon in Element ID in JQuery | ShivaSoft
</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<style>
.myButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	cursor:pointer;
}.myButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.myButton:active {
	position:relative;
	top:1px;
}
code
{
	color:green;
}
.error
{
	color:red;
}
</style>
</head>
<body>
<input value="ShivaSoft" type="text" size="30" id="abc:xyz" /> <br />
<input class="myButton" type="button" value="Clear Ans" onclick="clearAns()" />
<br />

<input class="myButton" type="button" value="Simple jQuery" onclick="simpleJQuery()" />
Using &nbsp;&nbsp;&nbsp;<code class="error">$("#abc:xyz")</code>
<br />

<input class="myButton" type="button" value="Traditional JS" onclick="simpleJS()" />
Using &nbsp;&nbsp;&nbsp;<code> document.getElementById("abc:xyz")</code>
<br />

<input class="myButton" type="button" value="JQuery-Approach1" onclick="app1()" />
Using &nbsp;&nbsp;&nbsp;<code>$('[id="abc:xyz"]')</code>
<br />

<input class="myButton" type="button" value="JQuery-Approach2" onclick="app2()" />
Using double slash (Escape sequence) in front of colon &nbsp;&nbsp;&nbsp;<code>$("#abc\:xyz")</code>
<br />

<input class="myButton" type="button" value="JQuery-Approach3" onclick="app3()" />
This is workaround. Get element by Javascript and pass to jQuery  &nbsp;&nbsp;&nbsp;
<code>
<pre>
	var ans = document.getElementById('abc:xyz');
	ans = $(ans).val();
</pre>
</code>
<br />

<hr />
Output -
<div id="divOut" style="background-color:yellow" />

<script type="text/javascript">

function app3()
{
	clearAns();
	var ans = document.getElementById('abc:xyz');
	ans = $(ans).val();
	printAns(ans);
}

function app2()
{
	clearAns();
	var ans = $("#abc\:xyz").val();
	printAns(ans);
}

function app1()
{
	clearAns();
	var ans = $('[id="abc:xyz"]').val();
	printAns(ans);
}

function simpleJQuery()
{
	clearAns();
	var ans = $("#abc:xyz").val();
	printAns(ans);
}

function simpleJS()
{
	clearAns();
	var ans = document.getElementById("abc:xyz").value;
	printAns(ans);
}

function clearAns()
{
	$("#divOut").html('');
}
function printAns(ans)
{
	var ansDiv = $("#divOut");
	ansDiv.html(ans);
	ansDiv.css("background-color",randColor());
}
function randColor()
{
    colors = ['orange', '#ccc', 'blue', 'green','yellow','lightGreen']
    return colors[Math.floor(Math.random()*colors.length)];
}
</script>
</body>
</html>

Live Demo

Related posts

  • Arun

    My mob no: +917204651195

  • john

    I generally just use a selector like $(“input[id$=blahblah]”) because what’s before the colon, and the colon itself, are generally dynamic anyway. Basically, that jQuery finds all inputs that have an ID that END with the string “blahblah”. Works very well and is less of a hassle then worrying about escaping the colon all the time.

    • john

      Oh, and one more thing. The $= way is much more thorough for finding Visualforce tags with user assigned IDs because of the other data that Salesforce precedes it with. For example:

      would produce an HTML input that looks something like this:

      so the $= method for finding an input is (imo) the best way.

  • Kshitij Lawate

    it helped me to resolve my issue…thanks!