Is a jQuery UI buttonset in tfoot possible?

robertbrower

Is a jQuery UI buttonset in tfoot possible? I'm trying to do it, but I'm having problems with the radio button's checked state. I've really no clue what is going on and am more or less just looking for any obvious NO answer.

The scenario is complex. I've got a jQuery UI Layout. Inside the west pane of the layout is an accordion with 3 panes. Inside each accordion pane is a DataTable. Inside the tfoot of each DataTable there is a buttonset as described on the jQuery UI button page.

The radio type input elements with the checked="checked" attribute set do not look checked. If I click on one then it becomes checked, but then if I change to another accordion pane, and return to the original, the checked state is just not recognized even though it has the attribute.

I know it's not a lot to go on, but looking for possible examples, tips, etc. Thanks.

Robert

allan

I don't see any reason why it wouldn't be possible, unless there is a bug in jQuery UI. If you disable DataTables, what happens?

Allan

robertbrower

When the DataTable is disabled, the radio buttons appear as they should and the checked attribute is correctly recognized. I'm not convinced it is a problem with DataTables, just wanted your answer which is that it ~should~ be possible.

Perhaps it has to do with the Accordion...

robertbrower

Fiddle tells me it is possible. This is a complicated page. I'm looking into it.

allan

Have you got scrolling enabled? DataTables splits the table up into components when enabled, which might (?!) be causing issues.

Allan

robertbrower

Yes, because the DataTable is being resized to fit it's containing layout div when the layout size is changed, I have scrolling enabled.

robertbrower

That is indeed the problem. Workaround??

robertbrower

fiddle reproducing the problem. Notice that radio1 is not shown checked.

http://jsfiddle.net/atomofthought/5Lh9P/

robertbrower

In my page, because the layout causes the DataTable to get resized, the radio states get lost.

robertbrower

I should add that this is only a problem with Chrome and FF. IE8 doesn't seem to be bothered.

robertbrower

I gave up. I moved the buttonset out of the tfoot. problem solved.

allan

Damn forum - I wrote a reply to you this morning - sorry you didn't get it!

The problem is that when scrolling is enabled, DataTables will clone the footer, including all the child elements. It is put very briefly into the document to layout the columns correctly, the upshot of which is that your radio button looses its checked state since only one radio button can be checked. Chrome etc I guess must favour the newly inserted element while IE8 doesn't.

It workaround is to recheck it after DataTables has initialised: http://jsfiddle.net/5Lh9P/2/

Its a bit crap, but that's the best I can think of at the moment!

Allan

robertbrower

Hey, thanks. I'll try that. It'll be cool to have these jquery ui checkboxes in the footer.