Question posted in 
I have actually setup a fnDrawCallback listener for my datatable whose purpose is to basically setup onClickListener for button that is drawn in the datatable … The button itself initiates an AJAX request for loading DOM (with a separate url ofc) as shown below in the code
$('#dataTable-current').DataTable({
'processing': true,
'serverSide': true,
'destroy':true,
'serverMethod': 'post',
'aaSorting':[],
'ajax': {
'url':'loadInfo/current_audit.php'
},
'fnDrawCallback':function(){
$(".action-btn").on('click',function(){
var target_row = $(this).closest("tr"); // this line did the trick
console.log(target_row)
var aPos = $("#dataTable-current").dataTable().fnGetPosition(target_row.get(0));
var courseData=$('#dataTable-current').DataTable().row(aPos).data()
delete courseData.action
delete courseData.allocate_faculty
var json_courseData=JSON.stringify(courseData)
console.log(json_courseData)
$.ajax({
type: "POST",
url: "loadModal/current_audit_modal.php",
// dataType: "json",
data: json_courseData,
success: function(output)
{
// $("#"+x).text("Deleted Successfully");
target_row.append(output);
$('#update-del-modal').modal('show')
$(document).on('hidden.bs.modal', '#update-del-modal', function () {
$("#update-del-modal").remove();
});
}
});
})
},
'columns': [
{ data: 'cname' },
{ data: 'cid' },
{ data: 'sem' },
{ data: 'dept_name' },
{ data: 'dept_applicable' },
{ data: 'max' },
{ data: 'min' },
{ data: 'no_of_allocated' },
{ data: 'allocate_faculty' },
{ data: 'action' },
],
'columnDefs': [ {
'targets': [4,8,9], // column index (start from 0)
'orderable': false, // set orderable false for selected columns
}]
});
Here is the code for loadModal/current_audit_modal.php
<?php
session_start();
if(isset($_SESSION['email']) && $_SESSION['role']=='inst_coor'){
include_once('../../config.php');
$data = json_decode(file_get_contents("php://input"),true);
$cid=mysqli_escape_string($conn,$data['cid']);
$cname=mysqli_escape_string($conn,$data['cname']);
$sem=mysqli_escape_string($conn,$data['sem']);
$max=mysqli_escape_string($conn,$data['max']);
$min=mysqli_escape_string($conn,$data['min']);
$result = mysqli_query($conn,"select academic_year from current_sem_info WHERE currently_active=1");
$row=mysqli_fetch_assoc($result);
$year=$row['academic_year'];
$dept_div='';
$checkbox_div='';
echo '<div class="modal fade mymodal" id="update-del-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle1">Action</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-delete-tab" data-toggle="tab" href="#nav-delete" role="tab" aria-controls="nav-delete" aria-selected="true">Deletion</a>
<a class="nav-item nav-link" id="nav-update-tab" data-toggle="tab" href="#nav-update" role="tab" aria-controls="nav-update" aria-selected="false">Update</a>
<a class="nav-item nav-link" id="nav-moreinfo-tab" data-toggle="tab" href="#nav-moreinfo" role="tab" aria-controls="nav-moreinfo" aria-selected="false">More Info</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!--Deletion-->
<div class="tab-pane fade show active" id="nav-delete" role="tabpanel" aria-labelledby="nav-delete-tab">
<form class="delete_course_form">
<div class="form-group">
<label for="exampleFormControlSelect1"><b>Are you sure you want to delete?</b>
</label>
<br>
<input type="hidden" name="cid" value="' . $cid . '">
<input type="hidden" name="sem" value="' . $sem . '">
<input type="hidden" name="year" value="' . $year . '">
<button type="submit" class="btn btn-primary" id="delete_course_btn" name="delete_course">Yes</button>
<button type="button" class="btn btn-secondary" name="no">No</button>
</div>
</form>
</div>
<!--end Deletion-->
<!--Update-->
<div class="tab-pane fade" id="nav-update" role="tabpanel" aria-labelledby="nav-update-tab">
<form method="POST" action="ic_queries/addcourse_queries.php" class="update_course_form">
<div class="form-row mt-4">
<div class="form-group col-md-6">
<label for="cname"><b>Name</b></label>
<input type="text" class="form-control" required="required" placeholder="New Course Name" name="coursename" value="' . $cname . '">
</div>
<div class="form-group col-md-6">
<label for="courseid"><b>Course ID</b></label>
<input type="text" class="form-control" required="required" placeholder="00000" name="courseidnew" value="' . $cid . '">
<input type="hidden" class="form-control" placeholder="00000" name="courseidold" value="' . $cid. '">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="semester"><b>Semester</b></label>
<input type="text" class="form-control" required="required" placeholder="Semester" name="semnew" value="' . $sem . '">
<input type="hidden" class="form-control" placeholder="Semester" name="semold" value="' . $sem . '">
</div>
<div class="form-group col-md-6">
<label for="semester"><b>Year</b></label>
<input type="text" class="form-control" disabled required="required" placeholder="Year" name="year" value="' . $year . '">
<input type="hidden" class="form-control" placeholder="Year" name="year" value="' . $year . '">
</div>
</div>
<br>
' . $dept_div . '
<br>
<div class="form-row">
<div class="form-group col-md-6">
<label for="max"><b>Max</b></label>
<input type="number" class="form-control" required="required" name="max" placeholder="120" value="' . $max . '">
</div>
<div class="form-group col-md-6">
<label for="min"><b>Min</b></label>
<input type="number" class="form-control" required="required" name="min" placeholder="1" value="' . $min . '">
</div>
</div>
<label for="branch"><b>Branches to opt for</b></label>
<br>
' . $checkbox_div . '
<br>
<button type="submit" class="btn btn-primary" id="update_course_btn" name="update_course">Update</button>
</form>
<br>
</div>
<!--end Update-->
<!--MoreInfo-->
<div class="tab-pane fade show active" id="nav-moreinfo" role="tabpanel" aria-labelledby="nav-moreinfo-tab-tab">
<label><b>More Info</b>
</div>
<!--end MoreInfo-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" name="close">Close</button>
<button type="button" class="btn btn-primary" name="save_changes">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>';
}
?>
And this is what I get as response from the browser but also a warning message pops up instantly
Along with this warning message
The DOM gets loaded with the response but also with a warning!!!
Thanks in advance!!
2
Answers
check your data in database at row 9 column 8, it’s usually contain (‘ “” : etc)
I think deleting courseData.allocate could be causing your problem because its no longer available to be rendered by the datatable. Amend the follow line.