如何通过jQuery获取JSF ID

看一个简单的JSF示例：

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

它将生成以下HTML代码：

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

使用jQuery选择器获取电子邮件ID，但失败。

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

解

这是集成JSF和jQuery的一个众所周知的问题-冒号“ : ”保留给jQuery选择器。 要使用jQuery seletor来获取JSF id，您需要在冒号前面加两个反斜杠来“ 逃脱 ”冒号：

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

对于PrimeFaces

PrimeFaces带有一个转义JSF id的函数：

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

此PrimeFaces.escapeClientId函数来自primefaces.js ，请查看源代码，它只是一个包装js函数，用于在前面加上双反斜杠来替换冒号“：”。

primefaces.js

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

PS已通过PrimeFaces 3.3测试

参考文献

1. jQuery选择器
2. 如何通过具有CSS表示法中使用的字符的ID选择元素？
3. jQuery –获取元素的ID
4. 来自JSF的ID，用于jQuery
5. jQuery，JSF ID和PrimeFaces

标签： jQuery的 JSF primefaces

翻译自: https://mkyong.com/jsf2/primefaces/how-to-get-jsf-id-via-jquery/