Javascript / jQuery cannot find element with corrupted id

Question

I am trying to access an item in MS CRM 2011 with the following identifier: account | NoRelationship | Form | B_GenerateInvoice-Large

I see this element in IE developer tools:

Unfortunately, I always get null when trying to find this element.

I tried the following:

alert(document.getElementById('account|NoRelationship|Form|B_GenerateInvoice-Large')); alert($("[id='account|NoRelationship|Form|B_GenerateInvoice-Large]").html()); alert($(jq("account|NoRelationship|Form|B_GenerateInvoice-Large")).html()); // jq() adds the '#' and escapes special characters alert($("#account|NoRelationship|Form|B_GenerateInvoice-Large").html()); alert(document.getElementById("#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large")); alert($("#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large").html()); 

All of them cannot find the item.

Did I miss something obvious here?

Decision:

javascript was inside the iframe, while the element was outside the iframe.

I could not solve it.

Answer 1

JQuery Manual on Selectors states:

If you want to use any of the metacharacters (for example ,! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) As the literal part of the name, you must avoid the character with two backslashes: \\. For example, if you have an element with id = "foo.bar", you can use the $ selector ("# foo \\. bar"). The W3C CSS specification contains a complete set of rules regarding proper CSS selectors .

So try the following:

 $('#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large')... 

jsFiddle Demo

EDIT : I successfully tested my script in Chrome, Firefox 4, IE9, IE8 and IE7, it works great.

Answer 2

This may be a bug in the browser, as the HTML5 specification allows any character except spaces in the id attribute

ID #

Any string with the following restrictions:

must be at least one character long

must not contain spaces

however, it was not created so as not to put any anchor character in the id attribute, only the number, letter and underscore :)

Answer 3

From the jQuery documentation:

If you want to use any of the metacharacters (such as! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) As the literal part of the name, you must escape the character with two backslashes: \. For example, if you have an element with id = "foo.bar", you can use the $ ("# foo \ .bar") selector.

So this should work:

 alert($("#account\\|NoRelationship\\|Form\\|B_GenerateInvoice-Large").html()); 

And this is true: http://jsfiddle.net/Cdz9w/

Answer 4

What version of HTML is the page announcing that it is using? Because valid HTML5 id , but it is invalid HTML4.01 and earlier id . (This is also an invalid CSS id , which is vaguely relevant if you use something like jQuery to find it, since jQuery uses CSS selectors.)

The @bazmegakapa answer fiddle works for me in Chrome, but maybe your page advertises a different version of HTML or maybe a less advanced browser, like it, etc.