Hi everyone,<\/p>\n
If you ever had the opportunity to work with JSF applications (or JSF’ish applications like XEO Applications) you may have noticed that most elements in the page have these weird ids like form:input<\/em><\/p>\n Imagine the following example in a XEO Application:<\/p>\n The resulting HTML would create a div for the input like the following:<\/p>\n Now, if you want to use Jquery to do something to this element, you would probably do it like this:<\/p>\n The problem is that you can’t do this, because in Jquery selectors the colon “:” is a special character and cannot be used like this to select an id. In order for the jquery selector to work you have to escape the colon with a double backslash, like the following:<\/p>\n But that is one ugly piece of code… you can do the following to ease the pain:<\/p>\n Document.getElementById does not interpret selector, as such there’s no problem having the colon, and since the jQuery selector accepts a DOM element, all is well. If you’re using the XEO Framework, you can do the following as well:<\/p>\n And what about CSS?\u00a0<\/strong><\/p>\n Well with CSS the problem is the same, you cannot have the colon in identifiers, so you have to escape it, like the following:<\/p>\n There’s just one little problem… this doesn’t work in IE6\/7 (shocking, I know). In order to have a compatible solution you need the following:<\/p>\n And I think this pretty much nails it \ud83d\ude42 Hope it helps someone! Hi everyone, If you ever had the opportunity to work with JSF applications (or JSF’ish applications like XEO Applications) you may have noticed that most elements in the page have these weird ids like form:input Imagine the following example in … Continue reading <xvw:form id='form'>\r\n <xvw:attribueText id='name' objectAttribute='username'>\r\n<\/xvw:form><\/pre>\n
<div id='form:name'>\r\n ...\r\n<\/div><\/pre>\n
$(\"#form:name\")<\/pre>\n
$(\"#form\\\\:name\")<\/pre>\n
$(document.getElementById('form:name'))<\/pre>\n$(XVW.get('form:name'))<\/pre>\n\/* Wrong *\/\r\n#form:name{\r\n color : red;\r\n}\r\n\r\n\/* Correct *\/\r\n#form\\:name{\r\n color : red;\r\n}<\/pre>\n\/* Correct! Compatible with IE 6\/7 *\/\r\n#form\\3A name{\r\n color : red;\r\n}<\/pre>\n
\nHappy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"