Server-side ajax freezes on delete btn click.

chessGuru64

Project Link: https://databasetable-net.000webhostapp.com/

    $(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">Delete</button>'
    }],
    rowGroup: {
    dataSrc: 1
    }
    });

    $(function(){
        $(document).on('click','.delete_btn',function(){

            var del_id= $(this).closest('tr');
            var ele = $(this).parent().parent();  //removed the "$" from the ele variable. It's a js variable.
            console.log(del_id);

            $.ajax({
                type:'POST',
                url:'delete.php',
                dataType: 'json', //This says I'm expecting a response that is json encoded.
                data: {  //Set up your post data as an array of key value pairs.
                  'del_id' : del_id
                }, 

                success: function(data){ //data is an json encoded array.
                  console.log('Data: ' + data); //Going to display whats in data so you can see whats going on.

                  if(data['success']){  //You are checking for true/false not yes or no.
                    console.log('You successfully deleted the row.');
                    ele.fadeOut().remove();
                  }else{
                    console.log('The row was not deleted.');
                    }

                 }

                })
            })
    });
    });

            <?php
            $del_id = $_POST['del_id']; 
            $stmt = $conn->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);
            ?>

Error:
You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'LIMIT ,' at line 1You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'LIMIT ,' at line 1.

This above error could be impacting my delete button... I think I used all my single quotes 'table' versus double quotes with "queries" correctly. Which is what seems the error seems to be?

chessGuru64

I solved the above error in the post above ^^^. Now just have to figure out why the button freezes after click. the info coming into the console.log looks correct...

colin

It looks like it's looping - 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 you may need to JSON.stringify your del_id.

chessGuru64

My friend from stackoverflow says you are most likely right (and i agree after doing some reading) but he was not fully sure when to stringify the data. I tried stringifying a coupe different ways in the delete.php file things like this:

<?php
$del_id = $_POST['del_id']; 
$stmt = $conn->prepare("DELETE FROM employees WHERE id = ?"); 
$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;
}

$array=JSON.stringify($array);
echo json_encode($array);
?>

I will continue to look for other articles when to stringify i have never had to do this before. Any further info would be appreciated.

chessGuru64

i also tried doing this:

 $(document).on("click", ".remove-discount-button", function (e) {
           e.stopPropagation();
           //some code
        });

seems to have gotten rid of the infinite loop issue (the site does not freeze anymore on del_btn click ).

source:
https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error

But it still does not delete.

chessGuru64

This could be the issue...

The main stack problem is caused by var edit_id = $(this).closest('tr'); . You try to send that whole jQuery object as data in the ajax. Then jQuery can't serialize it internally and throws a fit

You probably want some property like ID or a data attribute from that row to send (not clear what expectations are)