Ajax Update Error on Data Add
Ajax Update Error on Data Add
seularts
Posts: 9Questions: 2Answers: 0
I am trying to reload the data using ajax.reload() when adding new data in a CRUD interface using datatables, but I get a rather strange error in the console:
jquery.dataTables.min.js:37 Uncaught TypeError: Cannot set property 'data' of null
at sa (jquery.dataTables.min.js:37)
at Sb (jquery.dataTables.min.js:108)
at s.<anonymous> (jquery.dataTables.min.js:108)
at s.iterator (jquery.dataTables.min.js:100)
at s.<anonymous> (jquery.dataTables.min.js:108)
at Object.reload (jquery.dataTables.min.js:103)
at Object.success (core.php:275)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
Here is my script:
<script type="text/javascript">
$(document).ready(function() {
$("#addNew").on('click', function () {
$("#tableManager").modal('show');
});
$("#tableManager").on('hidden.bs.modal', function () {
$("#showContent").fadeOut();
$("#editContent").fadeIn();
$("#editRowID").val(0);
$("#longDesc").val("");
$("#shortDesc").val("");
$("#countryName").val("");
/* $("#closeBtn").fadeOut(); */
$("#manageBtn").attr('value', 'Add New').attr('onclick', "manageData('addNew')").fadeIn();
});
getExistingData(0, 50);
});
function deleteRow(rowID) {
if (confirm('Are you sure??')) {
$.ajax({
url: 'ajax.php',
method: 'POST',
dataType: 'text',
data: {
key: 'deleteRow',
rowID: rowID
}, success: function (response) {
$("#country_"+rowID).parent().remove();
window.location.reload();
/* alert(response); */
}
});
}
}
function viewORedit(rowID, type) {
$.ajax({
url: 'ajax.php',
method: 'POST',
dataType: 'json',
data: {
key: 'getRowData',
rowID: rowID
}, success: function (response) {
if (type == "view") {
$("#showContent").fadeIn();
$("#editContent").fadeOut();
$("#longDescView").html(response.longDesc);
$("#shortDescView").html(response.shortDesc);
$("#manageBtn").fadeOut();
$("#closeBtn").fadeIn();
} else {
$("#editContent").fadeIn();
$("#editRowID").val(rowID);
$("#showContent").fadeOut();
$("#longDesc").val(response.longDesc);
$("#shortDesc").val(response.shortDesc);
$("#countryName").val(response.countryName);
/* $("#closeBtn").fadeOut(); */
$("#tableManager").modal('hide');
$("#manageBtn").attr('value', 'Save Changes').attr('onclick', "manageData('updateRow')");
}
$(".modal-title").html(response.countryName);
$("#tableManager").modal('show');
}
});
}
// Individual Column Regex Filter - Part 1
/* function filterGlobal () {
$('.table').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
$('#global_smart').prop('checked')
).draw();
}
function filterColumn ( i ) {
$('.table').DataTable().column( i ).search(
$('#col'+i+'_filter').val(),
$('#col'+i+'_regex').prop('checked'),
$('#col'+i+'_smart').prop('checked')
).draw();
} */
function getExistingData(start, limit) {
$.ajax({
url: 'ajax.php',
method: 'POST',
dataType: 'text',
data: {
key: 'getExistingData',
start: start,
limit: limit
}, success: function (response) {
if (response != "reachedMax") {
$('tbody').append(response);
start += limit;
getExistingData(start, limit);
} else
/* $(".table").DataTable(); */
$('.table').DataTable({"order": [ 0, 'desc' ]}); $('#options').on( 'change', function () { $('.table').DataTable().column(1).search( this.value ).draw(); });
// Individual Column Regex Filter - Part 2
/* $('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} ); */
// Footer Selection Filter
/* $('.table').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} ); */
}
});
}
function manageData(key) {
var name = $("#countryName");
var shortDesc = $("#shortDesc");
var longDesc = $("#longDesc");
var editRowID = $("#editRowID");
if (isNotEmpty(name) && isNotEmpty(shortDesc) && isNotEmpty(longDesc)) {
$.ajax({
url: 'ajax.php',
method: 'POST',
dataType: 'text',
data: {
key: key,
name: name.val(),
shortDesc: shortDesc.val(),
longDesc: longDesc.val(),
rowID: editRowID.val()
}, success: function (response) {
if (response != "success")
alert(response);
else {
$("#country_"+editRowID.val()).html(name.val());
name.val('');
shortDesc.val('');
longDesc.val('');
$("#tableManager").modal('hide');
$("#manageBtn").attr('value', 'Add').attr('onclick', "manageData('addNew')");
/* window.location.reload(); */
/* $('.table').DataTable().draw(); */
var tab = $('.table').DataTable();
tab.ajax.reload();
}
}
});
}
}
function isNotEmpty(caller) {
if (caller.val() == '') {
caller.css('border', '1px solid red');
return false;
} else
caller.css('border', '');
return true;
}
</script>
This discussion has been closed.
Answers
The ajax.reload() is for the last function called manageData().
After a bit more digging I realized that ajax.reload() was not the answer since I was getting the data myself and not through ajax so I used this:
But now I am back to the main issue: DataTables warning: table id=DataTables_Table_0 - Cannot reinitialize DataTable. For more information about this error, please see http://datatables.net/tn/3
I am running in circles here!
Hi @seularts,
Yep, you can only initialise the table once. You can check to see if it has been initialised already with
$.fn.dataTable.isDataTable(), or you can force andestroyto reset it.It might be worth looking at Editor, since this is likely to provide the functionality you're after,
Cheers,
Colin
Destroy doesn't do anything for me either. Oh gosh, do I really have to get the Editor one to make such a simple action possible!?