Question

About a year ago, the jQuery protagonist and author Bear Bibeault made a comment on
coderanch to the effect that perhaps JSF component libraries weren’t all they’re made
out to be and that you can do a lot with javascript & jQuery.

I thought I’d take a fresh look at this, having just transitioned to jQuery UI dialogs,
and wishing I’d done it a long time ago.

One thing I’ve had nothing but trouble with is putting anything more complicated than
an h:outputText in a datatable (slight exaggeration there). I’ve just spent the best
part of the day getting a selectOneMenu working in a datatable, porting previously
working code from one xxx:dataTable to another, but things are firing off in different
phases, ajax requests in an unexpected order (despite a single queue), steam coming out
the debugger.

So I thought I’d take a look at the viability of using one of the jQuery datatable
offerings (comparisons available in other posts of course).

I’ll want to continue to use various JSF components within the datatable, and I just
wondered if there are any major considerations to take into account. Is fairly serious
jQuery usage in conjunction with a component library a common approach? Is integration
between jQuery and the backing bean a significant irritation?

There’ve been so many things I’ve not been able to do according to the original
design because of bugs and I’m fed up with waiting a year for a fix.

Thanks for any opinions.

Answer 1

I strongly recommend combining JQuery with any server-side technology. Rich server-side controls just reformat your output and generates lot of JavaScript to implement Web 2.0 effects. However, you cannot be sure would they work in all future browsers and how long. The purpose of JavaScript libraries (JQuery, Mootools, etc) is to enable a base functionality that guarantees cross browser compatibility and them you can create good plugins on top of them.
Also there is an issue with compatibility. As you already say, you can spend a lot of time transforming one server-side table component to another.
However, if you use JQuery plugins you can simply replace them. As an example if you have used JQuery DataTables to enhance web tables:

$("table#theTableId").dataTables();

If you want to replace it with some other JQuery table plugin such as jqGrid, you will replace this line of code with:

$("table#theTableId").jqGrid();

Optionally you should replace some initialization parameters. The only prerequisite is that your server-side component generates the HTML valid output for the table source.
And as a last note if you are using Ajax – use JavaScript. This is the most natural and easiest way to implement Ajax functionality. All other server side components just tries to hide JavaScript code from you but this is fine only in the basic functionalities. If you need any customization you will end-up with mix of Java, JavaScript and markup on the same place, and after lot of updates you will see that it would be better to implement all JavaScript related functions in the oure JavaScript/JQuery.