jQuery不适用于JSF动态UI组件

本文介绍了jQuery不适用于JSF动态UI组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在将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")