1

I have a page which has some divs. Each div id starts with the word divfor and have a suffix after that. Like divforjohn, divforjim ... etc. These suffixes come from database.

My problem is when i try to load something in that div it creates problem if it have the @ sign in it. So, if I do something like below:

 $("#divfor"+divsuffix).html('some text goes here.');

then it doesnot make any problem if the divname is divforjohn but doesnot work if the divname is divforjohn@x.

So, how can I address a div that has @sign in its id? or its a limitation/bug of jquery?

Thx.

Santosh Linkha
  • 13,692
  • 17
  • 72
  • 113
Ferdous
  • 11
  • 2
  • 1
    According to http://mathiasbynens.be/notes/html5-id-class you can use any character, as long as it's not a space… – Matijs Mar 28 '11 at 08:11
  • But this is for html5 which is not fully supported in browsers yet – Aly Mar 28 '11 at 08:13
  • @Aly: This is just standardizing what browsers already support. You don’t need to worry about browser support — this already works everywhere. Read the article. – Mathias Bynens Mar 28 '11 at 10:19

6 Answers6

3

To target the element with id="divforjohn@x" in JavaScript (be it through document.querySelectorAll or through jQuery/Sizzle) you’ll need to escape the @, like this:

$('#divforjohn\\@x')

Demo: http://jsfiddle.net/mathias/nafmt/

Also, the accepted answer is wrong — it states the ID naming rules that were included in the HTML 4 spec. The thing is, browsers never implemented this, so in HTML5 these rules aren’t as restrictive anymore. See “The id attribute just got more classy in HTML5”.

It’s perfectly safe to use weird characters in values for id or class attributes as long as you know what you’re doing.

Mathias Bynens
  • 130,201
  • 49
  • 208
  • 240
1

Update: As mentioned in the comment, at a point when your only aim is to support HTML5 browsers, by all mean use anything unique and contain at least 1 character for your ID attributes.

See this Stackoverflow thread for further discussion.

Hi, I hope this part of the document is helpful for you:

6 Basic HTML data types - IDs and Names

This is not a bug of jquery/javascript etc.

You can check the more formal HTML4 RFC of course.

Is there any reason you must have @ inside the id of an element?

I suggest you should try to avoid it because some legacy browsers aimed to support html4 might not have implemented it this way, as

Community
  • 1
  • 1
Winfred
  • 865
  • 6
  • 11
  • “I suggest you should try to avoid it because some browsers/future browsers might mis-interpret the @, without invalidating the HTML RFCs.” This has never been a problem in any browser, and it won’t be in the future either. The HTML spec (“HTML5”) allows any character in the value of `ID` attributes. See my answer: http://stackoverflow.com/questions/5456164/problem-with-at-sign-in-div-name/5457584#5457584 – Mathias Bynens Mar 28 '11 at 10:29
1

actually your ID can not contain @ as @Peter describes, once u changed your id then u can use like this

There is regex selector for jQuery:

http://james.padolsey.com/javascript/regex-selector-for-jquery/

That is used like this:

 $(':regex(id,/^divfor.*/)');
diEcho
  • 50,018
  • 37
  • 156
  • 230
1

This code works : 

var d = document.getElementById("divforjohn@x");
$(d).html('some text goes here.');

jsFiddle example

Sylvain
  • 3,763
  • 1
  • 25
  • 31
  • doesnt seem to work if you use the $('#divforjohn@x') instead of document.getElementById, but +1 for showing this – Aly Mar 28 '11 at 08:17
  • I know I doesn't work with $('#divforjohn@x'), my solution is just a workaround. Thanks for the +1 anyway :) – Sylvain Mar 28 '11 at 08:28
0

It might be doing similar to this. I would suggest just base 64'n the string before putting it in the div, then using the base64 name for everything. Or a row id, something generic, that you can always predict the outcome.

Ben
  • 8,230
  • 6
  • 45
  • 61
0

You should follow the ID naming rules:

  • Must begin with a letter A-Z or a-z
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")
  • Values are case-sensitive
Peter Smeekens
  • 664
  • 4
  • 9
  • Thanks. I should know it before! – Ferdous Mar 28 '11 at 08:20
  • 1
    Please, don't link to w3schools. ever. again. (try w3fools.com instead) – Matijs Mar 28 '11 at 10:30
  • Sorry, but your answer is incorrect. These ID naming rules were never enforced by browsers and are much less restrictive in HTML5. See http://stackoverflow.com/questions/5456164/problem-with-at-sign-in-div-name/5457584#5457584 P.S. http://w3fools.com/ – Mathias Bynens Mar 28 '11 at 10:31