Dealing with JSF ids in CSS and Javascript (JQuery)

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 a XEO Application:

<xvw:form id='form'>
   <xvw:attribueText id='name' objectAttribute='username'>

The resulting HTML would create a div for the input like the following:

<div id='form:name'>

Now, if you want to use Jquery to do something to this element, you would probably do it like this:


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:


But that is one ugly piece of code… you can do the following to ease the pain:


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:


And what about CSS? 

Well with CSS the problem is the same, you cannot have the colon in identifiers, so you have to escape it, like the following:

/* Wrong */
 color : red;

/* Correct */
 color : red;

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:

/* Correct! Compatible with IE 6/7 */
#form\3A name{
  color : red;

And I think this pretty much nails it 🙂 Hope it helps someone!
Happy coding!

Chrome 25 Bug – ExtJS 2.2 DatePicker extreme width

Hi everyone,

Chrome 25 was released just a few days ago and apparently it has an issue with CSS rendering. I couldn’t find much more on this, but there are some people complaining I’ve found out about this because of an issue with the DatePicker widget in ExtJS 2.2 (the version XEO ships with). I went on and tested Chrome with ExtJS 3 and 4 but the issue it not present.

This is what happens when you click on the DatePicker widget with Chrome 25

Chrome 25 DatePicker

Chrome 25 DatePicker

What happens is that when doing width calculations, there are some issues when width:100% is used, I can’t pin-point the situation exactly, but basically the DatePicket gets a width of more than 10.000 px wide. I found this to solve my problems with the DatePicker, so if you suffer from the same problem, use it:

/* Chrome25 Bug fix, 100% width causes issues with the date picker, replaced with a fixed width*/
table.x-date-inner {
   width:200px !important; /* original was width : 100% */

Just add this to a CSS your application uses, or replace the one in ExtJS. Hope it helps, I had to dig a lot in ExtJS source (and debugging in Google Chrome) to find out what was happening to produce a such a strange effect (that was not present in version 24).

Happy coding!


Developing with Google Chrome – Disable Cache

If you’re like me and do web developing you have to use Google Chrome one time or another to check the results (depends on everyone, I like Chrome’s developer tools, so I use it a lot).

One of the things that bothers most web developers is the browser’s cache (which is a very nice feature, but sometime it just hinders the development process as we don’t know if our change didn’t work out because it was wrong, or the browser didn’t update the html/css/javascript file).

So, to disable Google Chrome’s cache while developing, fire the Developer Tools (F12) and press the little “gear” icon on the right bottom of the screen (see picture bellow)

Google Chrome Settings

Google Chrome Settings

If you do that, the settings screen will appear and you should see the “Disable Cache” setting, check the box and happy coding (see picture bellow):

Disable Chrome Cache

Disable Chrome Cache

And that disables Google Chrome’s Cache. Hope this tip is as helpful to you as it was to me.