jQuery不适用于JSF动态UI组件 [英] JQuery not applying on JSF Dynamic UI Component
问题描述
我在将JQuery应用于JSF数据表时遇到问题.
I have a problem with JQuery applying on JSF datatable.
我的代码如下:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('<b>#example</b>').dataTable( {
"aoColumns": [
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ "desc" ] },
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "asc" ] }
]
} );
} );
</script>
XHTML
<h:dataTable id="example" name="example" value="#{notificationBean.notificationList}" var="item"
cellpadding="0" cellspacing="0" border="0"
styleClass="display"
rowClasses="gradeC"
style="background-image: url('../images/ClientCare_Menu_Gradient.jpg'); background-repeat: repeat-x;">
渲染时:
<table id="searchform:example" class="display" cellspacing="0" cellpadding="0" border="0" style="background-image: url('../images/ClientCare_Menu_Gradient.jpg'); background-repeat: repeat-x;">
现在我的问题是必须申请数据表的CSS没有得到应用.
Now my problem is The CSS which has to apply for the datatable is not getting applied.
我尝试了不同的表示法但仍然没有用 在Jquery中,我尝试过:
I tried different notations still it didnt work in Jquery i tried:
$ {'#searchform:example'},$ {'#searchform.example'} 在这些情况下,对包含表本身的悬停操作将无法显示数据表.
${'#searchform:example'}, ${'#searchform.example'} In these cases the Hover action on the containing table itself will not work to display the datatable.
$ {'searchform#example'},$ {'#example'} 在这种情况下,悬停操作有效并且呈现了数据表,但CSS不适用
${'searchform#example'}, ${'#example'} In these cases the hover action works and datatable is rendered but CSS is not applying
任何人都可以帮忙吗?
先谢谢了 迪帕克
推荐答案
您需要选择生成的HTML <table>
元素的客户端ID,而不是JSF <h:dataTable>
组件的组件ID.在特定情况下,HTML ID为searchform:example
.由于:
在CSS选择器中是非法字符,因此您需要对其进行转义:
You need to select the client ID of the generated HTML <table>
element, not by the component ID of the JSF <h:dataTable>
component. The HTML ID is in your particular case searchform:example
. Since :
is an illegal character in CSS selectors, you need to escape it:
$("#searchform\\:example")
或改用属性选择器:
$("[id='searchform:example']")
更容易的是给<h:dataTable>
一个样式类.
Easier would be to give the <h:dataTable>
a style class instead.
<h:dataTable styleClass="example">
在您的特定情况下,您已经有一个
In your particular case, you already have one
<h:dataTable styleClass="display">
所以您也可以使用
$(".display")
这篇关于jQuery不适用于JSF动态UI组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!