Saturday, November 7, 2009

Using jQuery with JSF

JSF is using its own ids naming convention in order to prevent duplicate ids on the generated HTML page. JSF uses “:” as id separator. When you wish to use jQuery with JSF, this raises a problem: jQuery uses the “:” character in it’s core libraries as a selector of elements. Therefore, suppose we have a field named: someInput, which used in a form named: someForm, JSF will name the field in the resulted HTML as: someForm:someInput. In order to get the filed element in JQuery we should do:

var value = $('#someForm:someInput').val();
But, unfortunately jQuery treats the “:” character as a special character and therefore misunderstands our request. In order to override this problem, jQuery allows escaping the “:” character. escaping is done by putting “\\” before the “:”. In our example it will look like:
var value = $('#someForm\\:someInput').val();


  1. Or you could use Tomahawk library and use the forceId="true" property, this way the components will have just that ID.

  2. You are correct, but:
    1) Not every one want to use Tomahawk.
    2) There are times you want to use a control from libraries other than Tomahawk (like Richfaces/Icefaces etc').