Jquery .text() not working

Question

I have an anchor tag like this:

<a id="1_18_shazin@mycompany.com" class="big-link" href="">4</a>

Now I am trying to replace the text with the following code

a = 1;
b = 18;
c = "shazin@mycompany.com";
var tempId = "#"+a+"_"+b+"_"+c;
$(tempId).text("some text");

Thiis never works. I tried .html(), .append(). Looks like it never finds the ID. But it works if I call the event by class name.

$(".big-link").text("some text");

Any clue? Thanks in advance.

First problem I see is the use of `@` in your ID and having it begin with a digit. Please see this SO answer for details : http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Ravi Y, Jan 18 '13 at 06:51
Problem is the `@` and `.` characters in the `id`. Check this SO answer for the solution http://stackoverflow.com/questions/605630/how-to-select-html-nodes-by-id-with-jquery-when-the-id-contains-a-dot — Sang Suantak, Jan 18 '13 at 06:53

score 6 · Accepted Answer · edited May 23 '17 at 10:34

The problem is with the way you are constructing your ID values. Issues are

Starting with a digit
Use of @
Use of .

I removed those and jquery text() was working fine for me. Check this fiddle : http://jsfiddle.net/kDnmu/

HTML

<a id="A_1_18_shazin_mycompany-com" class="big-link" href="">4</a>

Jquery

a = 1;
b = 18;
c = "shazin_mycompany-com";
var tempId = "#A_"+a+"_"+b+"_"+c;
$(tempId).text("some text");

For details on what is a valid id check this SO answer: What are valid values for the id attribute in HTML?

EDIT: If you are constructing these IDs dynamically, consider escaping them with some logic of your own.

@shazinltc its not necessary you can see my answer. – Jai Jan 18 '13 at 07:07 — Jai, Jan 18 '13 at 07:07

score 3 · Answer 2 · answered Jan 18 '13 at 07:07

3

Try this: http://jsfiddle.net/LPuTr/

a = 1;
b = 18;
c = "shazin@mycompany.com";
aaa = a+'_'+b+'_'+c;

$('a[id="'+aaa+'"]').text("some text");

for more info for ids in html 5 see this: http://mathiasbynens.be/notes/html5-id-class

answered Jan 18 '13 at 07:07

Jai

74,255
12
74
103

Excellent example, it is far simpler this way, but you need a browser that supports html5. – radu florescu Jan 18 '13 at 07:15
@Floradu88 Its not necessary though you can test it on `ie7` or `ie8` will work absolutely fine. – Jai Jan 18 '13 at 07:25
1

you are right, this needed to be the *marked* answer +1 from me for this – radu florescu Jan 18 '13 at 07:26

score 2 · Answer 3 · edited Jan 18 '13 at 07:10

2

You need to escape the dot(.) and @ characters with \\. try this

$("#1_18_shazin\\@mycompany\\.com").text("some text");

Try this : http://jsfiddle.net/HLtz9/10/

edited Jan 18 '13 at 07:10

radu florescu

4,315
10
60
92

answered Jan 18 '13 at 06:54

tusar

3,364
6
37
60

For my curiosity, How does the use of the \\ help avoid the ID validity requirements ? – Ravi Y Jan 18 '13 at 06:57
hey @ryadavilli, i really dont know in details, just got a similar problem once and learnt this by googling. – tusar Jan 18 '13 at 06:59
1

Found some explanation here : http://api.jquery.com/category/selectors/ and some details here: http://mathiasbynens.be/notes/css-escapes – Ravi Y Jan 18 '13 at 07:04

score 1 · Answer 4 · edited May 23 '17 at 10:34

1

You have illegal characters in your id, also an id cannot begin with a digit

What are valid values for the id attribute in HTML?

edited May 23 '17 at 10:34

Community

1
1

answered Jan 18 '13 at 06:54

petermk

757
1
6
18

score 0 · Answer 5 · edited May 23 '17 at 10:34

0

It looks to me you have to loose period . and alpha @ and then it works!

What are valid values for the id attribute in HTML?

I understand why alpha, but I have no clue for period :/

edited May 23 '17 at 10:34

Community

1
1

answered Jan 18 '13 at 07:00

elrado

4,960
1
17
15

score 0 · Answer 6 · answered Jan 18 '13 at 07:04

Here is working JSfiddle

Problem is you are using @ and . in your id

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

@ is not legal for ID while . and : is allowed but one should avoid it because:

For example, an ID could be labelled "a.b:c" and referenced in the style sheet as #a.b:c but as well as being the id for the element, it could mean id "a", class "b", pseudo-selector "c"

.

Jquery .text() not working

6 Answers6