I have interesting problem and i can't figure it out why it's happening like that. I have dataTables and data comes after selection change on a select, with jquery ajax post. And i have onclick function for multiple selection. (It must be run when click at table and it changes rows style etc.) I noticed that (with debug); when i click on row after first load onclick works one time as expected. But click after second load (selection changed) it runs 2 time and click after third load it runs 3 time i don't understand what's going on. So need some help.
Here is selection change function that loads the table;
// in doc.ready
$('#groupSelect').change(function() {
var group = $('#groupSelect').val();
if (!$.fn.DataTable.isDataTable('#questTable')) //this is for first load
{
GetQuestions(group);
} else //this is for after first load
{
var table = $('#questTable').DataTable();
table.destroy();
table.clear().draw();
GetQuestions(group);
}
});
And this is GetQuestions() function that gets data;
// out of doc ready
function GetQuestions(questGroup) {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'SetAudit.aspx/Questions',
data: '{"q_group":"' + questGroup + '"}',
success: function(result) {
$('#questTable').DataTable({
data: result.d,
columns: [{
data: 'q_id'
}, {
data: 'q_text'
}]
});
//this click function runs multiple time at 1 click
$('#questTable tbody').on('click', 'tr', function() {
var table = $('#questTable').DataTable();
var count = table.rows('.selected').count();
$(this).toggleClass('selected');
$('#selectedCount').text('' + table.rows('.selected').count() + '');
});
}
});
}
I don't if it is ok that i created it in ajax success func but it doesn't work anywhere else. Thanks in advance.
The issue is because every time a change event occurs on #groupSelect you fire an AJAX request, and in the success handler of that AJAX request you attach another click event handler to the tr of the table. Hence they duplicate.
To fix this I'd suggest you move the tr event handler outside the success handler and only run it once on load of the DOM. Try this:
function GetQuestions(questGroup) {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'SetAudit.aspx/Questions',
data: { q_group: questGroup },
success: function (result) {
$('#questTable').DataTable({
data: result.d,
columns: [
{ data: 'q_id' },
{ data: 'q_text' }
]
});
}
});
}
// do this on load *only*
$('#questTable tbody').on('click', 'tr', function () {
var table = $('#questTable').DataTable();
var count = table.rows('.selected').count();
$(this).toggleClass('selected');
$('#selectedCount').text(table.rows('.selected').count());
});
This should work
//this click function runs multiple time at 1 click
$('#questTable tbody').off().on('click', 'tr', function() {
var table = $('#questTable').DataTable();
var count = table.rows('.selected').count();
$(this).toggleClass('selected');
$('#selectedCount').text('' + table.rows('.selected').count() + '');
});
There are multiple ways you can solve the issue.
Removing and Adding the table DOM element: It depends on the way you construct data table. If you are constructing your datatable only from JS then you can go with this approach.
// in doc.ready
$('#groupSelect').change(function() {
var group = $('#groupSelect').val();
if (!$.fn.DataTable.isDataTable('#questTable')) {// this is for first load
GetQuestions(group);
} else {//this is for after first load
var table = $('#questTable').DataTable();
table.destroy();
table.clear().draw();
// empty the table which will eventually clear all the event handlers
$('#questTable').empty();
GetQuestions(group);
}
});
Using drawCallback event of datatable along with jQuery off: You can place the row highlighting function in drawCallback
//out of doc ready
function GetQuestions(questGroup) {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'SetAudit.aspx/Questions',
data: '{"q_group":"' + questGroup + '"}',
success: function(result) {
$('#questTable').DataTable({
data: result.d,
columns: [{
data: 'q_id'
}, {
data: 'q_text'
}],
drawCallback: function(settings) {
//this click function runs multiple time at 1 click
$('#questTable tbody').off().on('click', 'tr', function() {
var table = $('#questTable').DataTable();
var count = table.rows('.selected').count();
$(this).toggleClass('selected');
$('#selectedCount').text('' + table.rows('.selected').count() + '');
});
}
});
}
});
}
You're adding the binding to the click event inside your .change() function. This way you add a new binding everytime, hence the increasing number of calls to the function.
The proper way to do so is moving $('#questTable tbody').on('click', 'tr', function () { outside of GetQuestions.