bind rows on ajax reload

stevegodin

I am using this code to get clickable rows, called from fnInitComplete:

function createClickableRowsAllTickets() {
$(allTable.fnGetNodes()).click( function() {
alert('row clicked');
});
}
This works fine. However when I use fnReloadAjax to update the table the row clicks are no longer bound.

I tried to call the function once again on the callback of the fnReloadAjax but it doesn't work:

$("#alltickets input[type=checkbox]").click(function() {
allTable.fnReloadAjax('get_tickets', createClickableRowsAllTickets());
});

What is wrong?

Kadrian

Don't know if this is really correct, but try to use the fnDrawCallback instead of fnReloadAjax

stevegodin

I'm guessing the problem lies within allTable.fnGetNodes(), it seems that it is returning the previous table elements instead of the new loaded ones. How to solve that?

allan

See: http://datatables.net/faqs#events . You've destroyed all the old nodes with the event handlers, so you need to add new ones or use delegate events.

stevegodin

First, thanks for your response allan.

I tried to use delegate and live to get it to work, but still having trouble so that might not be the real problem. My guess:

When I call createClickableRowsAllTickets() I guess allTable has not been updated because allTable.fnGetNodes() still returns the old rows (as it looked before the fnReloadAjax call)

stevegodin

i called createClickableRowsAllTickets() manually from a button and it works, the rows are now clickable. The problem seems to be related to fnGetNodes() getting the previous nodes when called from the fnReloadAjax callback. Is there any other event that triggers when fnReloadAjax i successful that I can use?

stevegodin

Problem solved.

Code should be:

$("#alltickets input[type=checkbox]").click(function() {
allTable.fnReloadAjax('get_tickets', function() { createClickableRowsAllTickets();}, null);
});

instead of:


$("#alltickets input[type=checkbox]").click(function() {
allTable.fnReloadAjax('get_tickets', createClickableRowsAllTickets());
});


note the use of function() in the callback parameter.

allan

This would probably work as well:

[code]
$("#alltickets input[type=checkbox]").click(function() {
allTable.fnReloadAjax('get_tickets', createClickableRowsAllTickets);
});
[/code]

i.e. passing the `createClickableRowsAllTickets` function, rather than the result of calling it. Good to hear you got it working.

Allan