嵌套在AJAX输出中的jQuery AJAX函数（innerHTML）

Question

I use jQuery Ajax (innerHTML) to generate a listing of records from MySQL database. I would like to put a DELETE button next to each of these records.

Once you press the DELETE button, the record will be removed from database and faded away from the displayed list. Is it possible to do it - to nest another jQuery Ajax function in innerHTML output?

Please note that the DELETE function I use works perfectly fine with standard PHP/HTML output.

In the main php file (test1.php ) I have form to choose a time frame and once form is being submitted function bellow is generating my output in the same file:

<div id="display_taxation_data"></div>

Code responsible for generating listing:

function showDataLabour(str) {
if (str == "") {
    document.getElementById("display_taxation_data").innerHTML = "<h3>No results. Please select taxation period.</h3><hr>";
    return;
} else {
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("display_taxation_data").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET","accounting_get_period_data_labour.php?period="+str,true);
    xmlhttp.send();
    }
}

Code for accounting_get_period_data_labour.php ( set of records being generated based on previously selected time frame.)

echo "<tr id='record-$id'>";
echo "<td width='40'><a href='accounting_expenses_delete.php?delete=$id' class='delete'><i class='fa fa-times fa-2x' aria-hidden='true' title='Delete'></i></a></td>";
echo '</tr>';

And delete function that I want to trigger once button DELETE is pressed:

$(function() {
$('a.delete').click(function(e) {
    e.preventDefault();
    var parent = $(this).parent("td").parent("tr");
    console.log('idno : ' + parent);
    $.ajax({
        type: 'post',
        url: 'accounting_expenses_delete.php',
        data: 'delete=' + parent.attr('id').replace('record-',''),
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},100);
        },
        success: function() {
            parent.fadeOut(100,function() {
                parent.remove();
            });
        }
    });
});
});

And finally short code for accounting_expenses_delete.php

<?
include "connectdb_mysqli.php"; 
$testdel = $_POST['delete'];
$result = $mysqli->query("DELETE FROM `test` WHERE id='$testdel'"); 
 ?>

Please let me know if you need some more information.

Looking forward to your advice or solution on how I can achieve that DELETE action. Thank you

Answer 1

We can add a data-id tag for each of the link to delete:

echo '<td width="40">
          <a href="#" data-id="'.$id.'" class="delete"><i class="fa fa-times fa-2x" aria-hidden="true" title="Delete"></i></a>
      </td>';

Once this button has been clicked, it will run an Ajax request:

$(document).on('click', '.delete', function(e) {

    e.preventDefault();

    var elem = $(this),
        id = elem.attr('data-id'); /* GET THE ID NO. OF THE CLICKED DELETE LINK */

    $.ajax({ /* AJAX REQUEST */
        type: 'post',
        url: 'accounting_expenses_delete.php',
        data: {'delete-id': id},
        success: function() {
            elem.closest('tr').hide(200);
        }
    });
    return false;
});

Then for your accounting_expenses_delete.php:

include('connectdb_mysqli.php');

$stmt = $mysqli->prepare("DELETE FROM test WHERE id = ?");
$stmt->bind_param("i", $_POST["delete-id"]);
$stmt->execute();
$stmt->close();

I used prepared statement to do the DELETE query above.

---

Note:

jQuery is a javascript library and the script I had provided is a jQuery, so it means you have to include first the jQuery library before your script.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script>
    /* YOUR JQUERY SCRIPT HERE */
</script>