Updating Cells with JQuery widgets in them (destroy/init)

davideberlein

Hello together,

First off I want to thank the DataTable developers and all contributers soo much for this terrific pulgin!

I have a litte problem and I'm not quite sure what would be the right way to solve it.

I use DataTables on a standard HTML Table to make it more versatile. Now I have some cells in which I transform anchors into JQuery Buttons.
Here's the problem:
I Update these Cells periodontally using the [code]DataTable.fnUpdate()[/code] - method.
If I just overwrite the old buttons, I'll create a memory leak and unwanted behaviour because the listeners don't get unbound.
And after updating the Cell I also need to initialize the buttons again.

So my question is: What is the best way to update Cell content that needs destroy as well as Init callbacks?

VIDEN

Anyone, please?

allan

I presume that the jQuery buttons library you are using (jQuery UI?) will provide a destroy method. Can you not just call that on the button before updating the cell and then re-intiailisaing the button? Better yet - do you need to destroy and then create again? Can you not just dynamically update it? Again that will probably come down to the API that the buttons library presents.

Allan

VIDEN

Yes, I am Using the jQuery UI API.
I also agree, that changing the buttons state would be the most efficient way of updating since destroying and reinitializing takes unnecessary computation time.
The problem is, that I have a generic updatemethod that looks something like this:

[code]
$.getJSON(
'myurl',
{ "update": rowsToUpdate,
"cols": ['STATUS_BTN',
'ACTIVE_INACTIVE',
'PRESENT_VALUE']},
function(response) {
// Build array of columns we want to update
var columnIDs = new Array();
$.each(response.columns, function(i, column){
columnIDs.push($mytable.fnGetColumnIndexByName(column));
});
// Run through all the elements
$.each($mytable.fnGetNodes( ), function(){
var row = $mytable.fnGetPosition(this); // Get row position
var rid = $(this).attr("id"); // Get row ID

var rowData;
// only if entry exists
if(rowData = response.data[rid]){
// Update all the cells one by one
$.each(columnIDs, function(i, col){
// We update our cell without redrawing the
// table and redraw everything l8ter
$mytable.fnUpdate(rowData[i], row, col, false, false);
});
}
});
}
);
[/code]

I am looking for a way to keep this generic update method and adding some sort of destroy / reinit or even better an updateCell callback for my cells beeing updated.
Otherwise I would have to do some sort of switch case before calling $mytable.fnUpdate() which will make the code messy and ungeneric.

Do you have an idea of how to solve this problem, is there some sort of DataTables callback method I could use?

allan

[quote]VIDEN said: or even better an updateCell callback for my cells beeing updated.[/quote]

I'm not quite sure I understand this - since you are updating the cells with fnUpdate, why do you need a callback - can you not just execute whatever you need on the next line?

Is the issue not that that you need way of updating the contents of the button dynamically, which isn't something DataTables will be able to help with since it doesn't have any control over that element.

Allan

VIDEN

Of course I could add a switch - case clause after the fnUpdate and init the content depending on which cell was beeing updated.
But since i have some columns that only contain text and just have to be replaced, some columns that need destruction, replacement and initialization and some columns that just need eg. a state-change of a button it would be nice to have some kind of callback that would looc lice this:
[code]
function fnUpdateCell(newData, cell, oSettings)
[/code]

but I guess it would be better to do this on my side of the code, wrapping the call of fnUpdate...
thanks anyway for answering!

Greetz

David