datatable opens 2 modal popup on click of the row

nicklibee

Dear all,

I have a jquery datatable and i have enabled paging.

On click of any row it opens a modal popup.

When I navigate to page 2 from page1 and comes back and when I select any row it opens up two modal windows.

What is the reason for this??

Following is my code

function ServiceSucceeded(result) {
var resultObject = $.parseJSON(result.d);
if (resultObject == "" ) {
alert("No Result to display")
$('#demo').html('

');
oTable = $('#example').dataTable({
destroy: true,
data: resultObject,
deferRender: true,
searching: true,
order: [[1, "desc"]],
aoColumns: [
{ "data": "employee_id", "title": "employee_id" },
{ "data": "employee_name", "title": "employee_name" },
]
});
} else {
$('#demo').html('

');
oTable = $('#example').dataTable({
processing: true,
destroy: true,
data: resultObject,
deferRender: true,
searching: true,
order: [[1, "desc"]],
fnDrawCallback: function () {
$("#example tbody tr").click(function () {
var position = oTable.fnGetPosition(this);
var id = oTable.fnGetData(position)[0];
var nTds = $('td', this);
var page = 'EmployeeDetails.aspx?employee_id=' + $(nTds[0]).text() + "&condition=" + 4;
var $dialog = $('

')
.html('

')
.dialog({
autoOpen: false, modal: true, height: 545, width: 880, title: "Employee Details"
});
$dialog.dialog('open');
});
$('#example tbody tr').hover(function () {
$(this).css('cursor', 'pointer');
}, function () {
$(this).css('cursor', 'auto');
});
},
aoColumns: [
{ "data": "employee_id", "title": "employee_id" , sClass: "hidden" },
{ "data": "employee_name", , "title": "employee_name"}

               ]
            });
        }
    }

Thanks
Nick

nicklibee

can anyone here please help me?

psenechal

Hi Nick,

Try changing this:
$("#example tbody tr").click(function () {code here});
to
$("#example tbody tr").off("click").on("click", function () {code here});

I've had problems with multiple click binding occurring with DataTables and this resolves the issue for me.