Datatables .row() not working on reopening in bootstrap modal - twitter-bootstrap-3

Question

I am creating the datatables in bootstrap modal and it is working fine for the first time modal opening, but when the modal is reopened, the datatable functions are not working.
$("#unitTypePopupModal .modal-body").empty();
var html = '<div class="container-fluid col-md-12">';
html += '<div class="row">';
html += '<div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">';
html += '<div class="panel panel-default">';
html += '<div class="panel-body">';
html += '<div class="text-center">';
html += '<img src="Images/add-circle.png" class="login" height="70" />';
html += '<h2 class="text-center">Units</h2>';
html += '<div class="panel-body">';
html += '<form id="unitTypePopupForm" name="unitTypePopupForm" role="form" class="form form-horizontal" method="post">';
//html += '<fieldset>';
html += '<div class="form-group">';
html += '<div id="table-container" style="padding:1%;">';
//if (UnitTypeData.length > 0) {
html += '<div class="table-responsive">';
html += '<table id="unitTypesList" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">';
html += '<thead>';
html += '<tr>';
html += '<th>' + '#' + '</th>';
html += '<th>' + 'UnitType Guid' + '</th>';
html += '<th>' + 'UnitType Name' + '</th>';
html += '<th>' + 'Unit List' + '</th>';
html += '<th>' + 'Operation' + '</th>';
html += '</tr>';
html += '</thead>';
html += '<tbody>';
for (var i = 0; i < UnitTypeData.length; i++) {
html += '<tr>';
html += '<td>' + '' + '</td>';
html += '<td>' + UnitTypeData[i].UnitTypeGuid + '</td>';
html += '<td>' + UnitTypeData[i].UnitTypeName + '</td>';
html += '<td>' + 'Unit' + '</td>';
html += '<td>' + '<i class="ui-tooltip fa fa-file-text-o" style="font-size: 22px;" data-original-title="View" title="View"></i>' + ' ' + '<i class="ui-tooltip fa fa-pencil-square-o" style="font-size: 22px;" data-original-title="Edit" title="Edit"></i>' + ' ' + '<i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete" title="Delete"></i>' + '</td>';
html += '</tr>';
}
html += '</tbody>';
html += '</table>';
html += '</div>';
//} else {
// html += '<p>There is no Unit Type available to be displayed.</p>';
// }
html += '</div>';
html += '</div>';
//html += '</fieldset>';
html += '</form><!--/end form-->';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$("#unitTypePopupModal .modal-body").append(html);
$('#unitTypePopupModal').modal('show');
$("#unitTypePopupModal").on('show.bs.modal', function () {
$("#unitTypePopupModal .modal-body").empty();
//bootbox.alert(html);
});
$("#unitTypePopupModal").on('hiddden.bs.modal', function () {
//$("#unitTypePopupModal .modal-body").empty();
$(this).data('bs.modal', null);
});
unitTypeTableRelatedFunctions();
$('#unitTypePopupForm').validate({ // initialize plugin
ignore: ":not(:visible)",
rules: {
unitTypeName: {
required: true,
noSpace: true
}
},
messages: {
unitTypeName: {
required: "Please Enter the UnitType Name.",
noSpace: "UnitType Name cannot be empty."
}
},
//errorPlacement: function (error, element) {
// switch (element.attr("name")) {
// case "dpProgressMonth":
// error.insertAfter($("#dpProgressMonth"));
// break;
// default:
// //nothing
// }
//}
});
The following function is called
unitTypeTableRelatedFunctions = function () {
var unitTypeEditing = null;
var table = $('#unitTypesList').DataTable({
responsive: true,
pagingType: "full_numbers",
searchHighlight: true,
stateSave: true,
destroy: true,
//orderable: false,
columnDefs: [
{
targets: [0],
orderable: false,
searchable: false
},
{
className: 'never',//className:'hidden',
targets: [1],
visible: false,
orderable: false,
searchable: false
},
{
targets: [2],
orderable: true
},
{
targets: [3],
orderable: false
},
{
targets: [4],
orderable: false,
searchable: false,
//defaultContent: '<a class="viewWorkItemSubHeadBtn" onclick="editBtnClicked(this);"><i class="ui-tooltip fa fa-file-text-o" style="font-size: 22px;" data-original-title="View"></i></a> <a class="editWorkItemSubHeadBtn"><i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i></a> <a class="deleteWorkItemSubHeadBtn"><i class="ui-tooltip fa fa-trash-o" style="font-size: 22px;" data-original-title="Delete"></i></a>'
}
],
order: [[2, 'desc']],
language: {
//"lengthMenu": "Display _MENU_ records per page",
lengthMenu: 'Display <select>' +
'<option value="5">5</option>' +
'<option value="10">10</option>' +
'<option value="15">15</option>' +
'<option value="20">20</option>' +
'<option value="25">25</option>' +
'<option value="30">30</option>' +
'<option value="35">35</option>' +
'<option value="40">40</option>' +
'<option value="45">45</option>' +
'<option value="50">50</option>' +
'<option value="100">100</option>' +
'<option value="-1">All</option>' +
'</select> records per page',
zeroRecords: "Nothing found - sorry",
info: "Showing page _PAGE_ of _PAGES_",
infoEmpty: "No records available",
infoFiltered: "(filtered from _MAX_ total records)"
},
pageLength: 5,
//select: {
// style: 'os',
// blurable: true
//},
dom: '<"top"<"pull-left"B><f>>rt<"bottom"i<"pull-left"l><p>><"clear">',
//dom: '<lf<t>ip>',
//dom: '<"wrapper"flipt>',
//dom: '<"top"i>rt<"bottom"flp><"clear">',
buttons: [
{
text: '+ Create New UnitType',
className: 'btn-success addNewUnitTypeBtn',
action: function (e, dt, node, config) {
e.preventDefault();
addNewUnitType();
}
}
]
});
table.on('order.dt search.dt', function () {
table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
$('#unitTypePopupModal').on('click', '#unitTypesList a.editUnitTypeBtn', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var selectedRow = $(this).parents('tr')[0];
//var selectedRowIndex = table.row($(this).parents('tr')).index();
if (unitTypeEditing !== null && unitTypeEditing != selectedRow) {
/* A different row is being edited - the edit should be cancelled and this row edited */
restoreUnitTypeRowData(table, unitTypeEditing);
editUnitTypeRow(table, selectedRow);
unitTypeEditing = selectedRow;
addUnitTypeBtn.enable();
$('#unitTypePopupModal input#unitTypeName').focus();
}
//else if (nEditing == selectedRow && this.innerHTML == "Save") {
// /* This row is being edited and should be saved */
// saveRow(oTable, nEditing);
// nEditing = null;
// createBtnClicked = 0;
//}
else {
/* No row currently being edited */
editUnitTypeRow(table, selectedRow);
unitTypeEditing = selectedRow;
addUnitTypeBtn.enable();
$('#unitTypePopupModal input#unitTypeName').focus();
}
});
When edit button is clicked, the click event is fired and the following function is called:
editUnitTypeRow(table, selectedRow)
the function body is:
editUnitTypeRow = function (table, selectedRow) {
var selectedRowData = table.row(selectedRow).data();
var availableTds = $('>td', selectedRow);
availableTds[1].innerHTML = '<input type="text" id="unitTypeName" name="unitTypeName" placeholder="UnitType Name" class="form-control text-capitalize" value="' + selectedRowData[2] + '">';//UnitType
availableTds[2].innerHTML = '';
availableTds[3].innerHTML = '<i class="ui-tooltip fa fa-floppy-o" style="font-size: 22px;" data-original-title="Save" title="Save"></i>' + ' ' + '<i class="ui-tooltip fa fa-times-circle-o" style="font-size: 22px;" data-original-title="Cancel" title="Cancel"></i>'
}
In this function the table row data is not extracted properly.
I am getting the data when the modal is opened for the first time after page reload but if i open the modal second time the table.row() function is not fetching the row data, but the data is present in the row.
The html code is as follows:
<div id="unitTypePopupModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" style="overflow-y:initial !important;">
<div class="modal-content">
<div class="modal-header" style="display:none"></div>
<%--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 class="text-center">What's My Password?</h1>
</div>--%>
<div class="modal-body" style="max-height:calc(100vh - 200px); overflow-y: auto;">
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
</div>
The clicks in popup modal works initially after page load but do not work after we re-open the popup modal.

Answer 1

Since you are dinamically adding html content, you need to delegate events in a different way
Code like this will execute only if object #selector is present on page at load time
$('#selector').on('click', function(){...etc...});
If you want to delegate event to dinamically added elements, you have to do like this:
$('#container').on('click', '#selector', function(){...etc...});
Where #container exist in DOM since page load. If you want to be 100% sure not to do mistake, just use $(document.body).on(...), but it will slow down a bit your code since the body is full of elements
EDIT after fiddle #12: I'm sorry but your code is way too crowded to easily find a solution. I tried to log some data and I see that when you close and reopen the modal, the event is triggered twice both when you click "Edit" and "Cancel" (I guess other buttons behave the same), so it is actually working correctly, but the secont time it is called, the unitTypeEditing is empty, that's why the input field isn't hiding..
I suggest you to switch to x-editable plugin, this should avoid any problem with restoring previous data and it will result in much less code to write.