See a simple JSF example :

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

It will generates following HTML code :

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

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

<script>
   jQuery(document).ready(function($) {
 
	$('#signup-form:email').checkEmailFormat();		
 
   });
</script>

Solution

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 :

<script>
   jQuery(document).ready(function($) {
 
	$('#signup-form\\:email').checkEmailFormat();		
 
   });
</script>

For PrimeFaces

PrimeFaces comes with a function to escape the JSF id :

<script>
   jQuery(document).ready(function($) {
 
	$(PrimeFaces.escapeClientId('signup-form:emil')).checkEmailFormat();
 
   });
</script>

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.

primefaces.js
escapeClientId:function(a){return"#"+a.replace(/:/g,"\\:")}

P.S Tested with PrimeFaces 3.3

References

  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 Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider making a donation to the charity, thanks.

Related Posts

Popular Posts