Events called before dataTable updates... to help clear up memory leaks
Events called before dataTable updates... to help clear up memory leaks
I currently use fnRowCallback to bind click events to certain columns using the .on() method. but I'd like to make sure those events are unbound correctly so that it all is handled in garbage collection. I don't see how to do that?
is there an event that is thrown just before the contents of the datatable change/refresh/repaint so i can call the .off() method to unbind my bound events?
I can call the .off() methods before reloading the data on a different search - but not if i'm doing something like a sort or pagination
is there an event that is thrown just before the contents of the datatable change/refresh/repaint so i can call the .off() method to unbind my bound events?
I can call the .off() methods before reloading the data on a different search - but not if i'm doing something like a sort or pagination
This discussion has been closed.
Replies
Here is what i have right now - but i want to be able to call .off() BEFORE any dom elements are destroyed on any kind of table changes - including pagination and sorting.
unless you are calling safe code that would automatically call .off() and destroy those bindings without me telling it to explicitly.
[code]
this.DoSearch = function (wsParams) {
$('span[title="Open Order"]').off("click");
var jsonStr = JSON.stringify(wsParams);
$.ajax({
type: "POST",
url: "Default.aspx/DoSearch",
data: jsonStr,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var response = msg.d;
if (response.ErrorCode > 0) {
$.jGrowl(response.ErrorMessage, { header: 'Info', life: MasterPageObj.jGrowlLife, corners: '10px' });
} else if (response.ErrorCode < 0) {
$.jGrowl(response.ErrorMessage, { header: 'Error', life: MasterPageObj.jGrowlLife, corners: '10px', theme: 'jgError' });
}
// This method destroys the table and recreates it using the data we just got. if we have problems
// with this
$('#OrderSearchTable').dataTable({
"bDestroy": true,
"bJQueryUI": true,
"iDisplayLength": 25,
"sPaginationType": "full_numbers",
"aaData": response.SearchResults,
"oLanguage": {
"sSearch": "Filter Records:"
},
"aoColumns": [
{ "sTitle": "PSR", "mData": "PSR" },
{ "sTitle": "ID", "mData": "OrderNum" },
{ "sTitle": "Service", "mData": "Service" },
{ "sTitle": "Site Name", "mData": "SiteName" },
{ "sTitle": "Status", "mData": "Status" },
{ "sTitle": "Type", "mData": "OrderType" },
{ "sTitle": "Age", "mData": "Age" },
{ "sTitle": "NDN", "mData": "NDN" }
],
"aoColumnDefs": [
{
"mRender": function (data, type, row) {
// create a hyperlink on the first column elements to open that template in the editor
return '' + data + '';
},
"aTargets": [0, 1]
},
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// add a click event to the delete. Do it this way rather than inline to prevent memory leaks in ie6-8
$('span[title="Open Order"]', nRow)
.css("border-bottom", "1px solid navy")
.css("cursor", "pointer")
.on("click", function (event) {
DefaultPageObj.OpenOrder(aData.OrderNum);
});
},
"sDom": '<"H"fr>t<"F"ip>',
"bDeferRender": true,
"bAutoWidth": false
});
response = null;
},
error: function (xhr, msg) {
var response = JSON.parse(xhr.responseText);
if (response.Message) {
MasterPageObj.showError("Web Service Error - DoNetprovSearch()", response.Message);
}
else {
MasterPageObj.showError("Web Service Error - DoNetprovSearch()", "There was an unknown error calling the Web Service");
}
response = null;
}
});
} // DoSearch()
[/code]