JQuery not applying on JSF Dynamic UI Component

Question

I have a problem with JQuery applying on JSF datatable.

I have my code like this:

<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;">

When it renders:

<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;">

Now my problem is The CSS which has to apply for the datatable is not getting applied.

I tried different notations still it didnt work in Jquery i tried:

${'#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'} In these cases the hover action works and datatable is rendered but CSS is not applying

Can anyone help in this ??

Thanks in advance Deepak

What's that <b></b> doing there in the jQuery selector?

BalusC
– BalusC

2012-04-25 16:54:33 +00:00
Commented Apr 25, 2012 at 16:54 — BalusC
– BalusC, Commented Apr 25, 2012 at 16:54
Have a look to this related answer

landal79
– landal79

2012-04-25 16:57:51 +00:00
Commented Apr 25, 2012 at 16:57 — landal79
– landal79, Commented Apr 25, 2012 at 16:57
<b></b> is just a formating... i just tried to make it bold

user1356720
– user1356720

2012-04-25 19:24:18 +00:00
Commented Apr 25, 2012 at 19:24 — user1356720
– user1356720, Commented Apr 25, 2012 at 19:24

BalusC · Accepted Answer · 2012-04-25 16:57:03Z

1

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")

or use the attribute selector instead:

$("[id='searchform:example']")

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">

So you can also just use

$(".display")

answered Apr 25, 2012 at 16:57

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1356720 Over a year ago

Wow Wow the first option did work like a charm... Thanks a lot Balu... :) :)

Collectives™ on Stack Overflow

JQuery not applying on JSF Dynamic UI Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related