How to get JSF id via jQuery
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
JESUS TY, GOD TY
Please remove $ in ur javascript code.
And how do you do an ‘alert’ whith jQuery and JSF?
As an alternative, you can also just use some css class name like so:
.myCSSClass{}
which ends up in HTML as
so that you can get the id as:
var elementId = $(‘.someClassName’);
Correction to previous comment, the css class defined like so:
.myCSSClass{}
The JSF like so:
which ends up in HTML as:
so that you can get the id as:
var elementId = $(“.myCSSClass”);
Or, you can change the separator char: