DataTables duplicating table rows when drawn

Zxurian

so I've got an interesting problem that I've not encountered before.
I'm currently using DataTables with an ajax source, and when datatables does it's fetch of data and displays it to the table, it duplicates every row in the table. Refreshing the page a few times will sometimes cause it to display the content properly, other times, it requires just leaving and coming back later.

The following is my initialization: http://pastebin.com/FU7VBAtN

Zxurian

any ideas on what I could do to prevent Databales from redrawing the same row twice?

(p.s., the forum view says there was 1 comment prior to posting this, but when I click on it, I only see my original post)

allan

Hmm - not sure what happened to the forum there.

However in answer to your question, there is nothing obvious in your initialisation as to why this would happen. Are you seeing any JS errors on the console or anything? Perhaps you could run the table through the debugger when this occurs ( http://debug.datatables.net ) so I can see if there is anything particularly odd happening, but I'm not sure what it would be to be honest!

One thing I would say, rather than using static events applied in fnDrawCallback - you'd be better off using live events: http://datatables.net/release-datatables/examples/advanced_init/events_live.html

Allan

Zxurian

thanks for the update. I haven't seen it occur again recently, but if it does, i'll keep an eye out for it.

In regards to using live vs. fnDrawCallback,I looked up .live() on jQuery's website, but it looks like they're depreciating it in favor of .on(), and according to the documentation, it looks like the HTML elements have to be present within the DOM before using it, so if I'm inserting an element into the table via an fnUpdate(), wouldn't I still need to place it inside the fnDrawCallback(), since that fires after the element has been added?

Zxurian

In regards to the forum, I think it was just my interpertation of the # comments being wrong. In the topic list, it shows # comments as the total posts including the original topic starter, and I'm just used to #comments only being those in addition to the topic starter, not including. My mistake.

allan

> so if I'm inserting an element into the table via an fnUpdate(), wouldn't I still need to place it inside the fnDrawCallback(), since that fires after the element has been added?

No - you would just use the delegate options of .on. For example

[code]
$('#example tbody').on('click', 'tr', function () {...});

// would work the same as:

$('#example tbody tr').live( 'click', function () {...});
[/code]

They aren't removing functionality, just refactoring the API.

Allan

Zxurian

that's what I thought, although I may be missing something.
I refactored the code from inside back to
[code]$(".datatable tbody tr td").on("click", ".invoice", function() {...});[/code]
but it's not firing when I click on the element with a class="invoice" inside the cell

allan

Is it "td.invoice" or "td element.invoice" you are trying to use? Does it work when you don't initialise DataTables?

Allan

Zxurian

It's "... td button.invoice" and I can't test whether it works without initializing datatables, as I'm having datatables use an Ajax source for the data. I can say that if I put a $(".invoice").click() inside the fnDrawCallnack(), it does properly bind the event to the button.

Zxurian

I seem to have solved it / narrowed it down.
By using [code]$(".datatable").on("click", ".invoice", function(event){ ... });[/code] it properly binds to newly created items. Just had to be more general with the initial selector.