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 <code class="error">$("#abc:xyz")</code>
<br />
<input class="myButton" type="button" value="Traditional JS" onclick="simpleJS()" />
Using <code> document.getElementById("abc:xyz")</code>
<br />
<input class="myButton" type="button" value="JQuery-Approach1" onclick="app1()" />
Using <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 <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
<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>
Leave a Reply