See a simple JSF example :

<h:form id="signup-form">
    <h:inputText id="email" value="#{}" />

It will generates following HTML code :

<input id="signup-form:email" type="text" />

Uses jQuery selector to get the email id, but failed.

   jQuery(document).ready(function($) {


This is a well-known problem to integrate JSF and jQuery – the colon “:” is reserved for jQuery selector. To use jQuery seletor to get the JSF id, you need to “escaped” the colon by placing two backslashes in front of it :

   jQuery(document).ready(function($) {

For PrimeFaces

PrimeFaces comes with a function to escape the JSF id :

   jQuery(document).ready(function($) {

This PrimeFaces.escapeClientId function is from primefaces.js, review the source code, it’s just a wrapper js function to replace the colon “:” with placing a double backslashes in front of it.


P.S Tested with PrimeFaces 3.3


  1. jQuery selector
  2. How do I select an element by an ID that has characters used in CSS notation?
  3. jQuery – get id of an element
  4. Id’s from JSF, used in jQuery
  5. jQuery, JSF ids and PrimeFaces
Tags :
Founder of and, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Related Posts

Popular Posts