Problem with JQuery accordion inside table cell

Sara42

I'm having trouble getting the jQuery UI accordion to work inside a table cell. It worked when the table was client side, but is not working in the server-side version.

The function of the accordion is to show/hide spoiler text. So if the text is marked "spoiler", it is wrapped in a that creates the accordion and the user can open it if they wish. This is all put together and then passed as a row in JSON. When displayed, all of the html tags are showing up properly inside the table cell, the accordion is just not being created. Accordions outside the table are working fine.

Do JQuery UI elements normally work inside server-side DataTables (and I should be looking for a typo or something)? Or is there something I have to do to get server-side DataTables to use JQuery UI elements inside it? Is there a better way to hide specific text in server-side DataTables besides JQuery UI accordion?

The built-it DataTables "row details" feature is not what I'm looking for. I need the hidden text feature to be applied only to specific text inside a cell in a single column (depending on if the specific text is marked as "spoiler"), and the users need to have the option to turn off spoiler hiding entirely.

Thanks,
Sara

allan

Have a look at this FAQ which I think should help: http://datatables.net/faqs#ss_events

Allan

timtucker

For your client-side table, I'm guessing your accordions are being initialized when the page is loaded, likely with something to the effect of:
[code]
$(function() {
$(".columnName .spoilerAccordion").accordion();
};
[/code]

Any time you're adding to the DOM after the page load (whether through DataTables or another AJAX call to load content, you'll need to look at what's being added and initialize any jQuery UI elements in the new content.

In this case -- assuming you're using 1.9 -- you're probably going to need to add something to the fnCreatedCell method for the column definition where you have your accordion and including something similar to the following to initialize any accordions within the cell:
[code]
fnCreatedCell : function(cell, cData, aData, row) {
$(cell).find(".columnName .spoilerAccordion").accordion();
}
[/code]

Sara42

I got it working using fnDrawCallback. I added $('.spoiler').accordion() to fnDrawCallback, and everything seems to be working now.

Thanks for pointing me in the right direction!
Sara