Introduction: I am doing a server-side Jquery datatables.net library using ajax/json. My sample project can be found: https://databasetable-net.000webhostapp.com/
Error: When I click the delete button.... The console shows "Uncaught RangeError: Maximum call stack size exceeded". It looks to me as though the Ajax call isn't being issued (nothing is showing on the network tab) - so it must be when creating the request. I suspect I need to JSON.stringify my del_id.
Index.php Code:
<script type="text/javascript">
$(document).ready(function() {
$( "#form1" ).hide();
$( "#signup" ).click( function() {
$( "#form1" ).toggle( 'slow' );
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "server.php",
"type": "POST",
},
columnDefs: [{
targets: -1,
defaultContent: '<button type="button" class="delete_btn" data-id=<?php echo "row[id]"?> ">Delete</button> <button type="button" class="edit_btn">Edit</button>'
}],
rowGroup: {
dataSrc: 1
}
});
});
</script>
<script type="text/javascript">
$(function(){
$(document).on('click','.delete_btn',function (e) {
e.stopPropagation();
var per_id=$(this).data('id');
var del_id= $(this).closest('tr');
var ele = $(this).parent().parent();
console.log(del_id);
$.ajax({
type:'POST',
url:'delete.php',
dataType: 'json', //This says I'm expecting a response that is json encoded.
data: { 'del_id' : del_id},
success: function(data){ //data is an json encoded array.
console.log('Data: ' + data);
console.log(JSON.stringify('Data: ' + data));
if(data['success']){ //You are checking for true/false not yes or no.
console.log('You successfully deleted the row.');
alert("row deleted");
ele.remove();
}else{
console.log('The row was not deleted.');
}
}
});
});
</script>
<script type="text/javascript">
$(document).on('click', '.edit_btn',function(){
var edit_id= $(this).closest('tr');
var ele = $(this).parent().parent(); //removed the "$" from the ele variable. It's a js variable.
console.log(edit_id);
$('#content-data').html('');
$.ajax({
url:'edit.php',
type:'POST',
data: { 'edit_id' : edit_id},
dataType:'html'
}).done(function(data){
$('#content-data').html('');
$('#content-data').html(data);
}).fail(function(){
$('#content-data').html('<p>Error</p>');
});
});
</script>
Delete.php
$del_id = $_POST['del_id'];
$stmt = $con->prepare("DELETE FROM employees WHERE id = ?"); //LIMIT 1
$stmt->bind_param('i', $del_id);
$confirmDelete = $stmt->execute();
$array['success'] = FALSE; //Initialize the success parameter as false.
if($confirmDelete){ //Check to see if there was an affected row.
$array['success'] = TRUE;
}
echo json_encode($array); //Your ajax is setup to expect a json response.
//json_encode the $array and echo it out. You have to do this.
//When you "echo" out a value, that is what the server is going to submit back to the ajax function.
//If you do not do this, the ajax script will not recieve a response from the delete.php page.
What I have tried: I tried using stringify.json within the delete.php page with no success.
$array=JSON.stringify($array);
echo json_encode($array);
This seemed to have gotten rid of the Uncaught RangeError: Maximum call stack size exceeded error:
$(document).on("click", ".remove-discount-button", function (e) {
e.stopPropagation();
//some code
});
