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();