使用AJAX从数据库中删除记录

I have a PHP file which displays data from a database. I'm using while() to display each of the records.

我有一个PHP文件,显示数据库中的数据。我正在使用while()来显示每条记录。

My PHP file:

我的PHP文件:

<?php

    $flightTicketsSQL = "SELECT * FROM `flightbookings` WHERE username='$user' AND cancelled='no'";
    $flightTicketsQuery = $conn->query($flightTicketsSQL);

    while($flightTicketsRow = $flightTicketsQuery->fetch_assoc()) { ?>

    <tr>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["bookingID"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["origin"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["destination"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["date"]; ?></td>
        <td class="tableElementTags text-center"><?php echo $flightTicketsRow["mode"]; ?></td>
        <td class="text-center"><span class="fa fa-remove tableElementTags pullSpan" id="deleteAccount"></span></td>
    </tr>

<?php } ?>

If the user clicks on the last <td> (the one with the Font Awesome icon), I want the record with the particular bookingID be deleted from the database.

如果用户点击最后一个(具有Font Awesome图标的那个),我希望从数据库中删除具有特定bookingID的记录。

To do this I'll need to identify the value using jQuery .val()

为此,我需要使用jQuery .val()来识别值。

My JS file:

我的JS档案:

var id = $("**WHAT DO I PUT HERE ?**").val();

    $('#deleteAccount').click(function() {
        $.ajax({
            type: "POST",
            url: 'cancelTicket.php',
            data: { bookingID : id },
            success : function() {
                alert("Cancelled");
            }
        });
    });

My cancel.php file:

我的cancel.php文件:

<?php

    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "database";

    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $user = $_SESSION["username"];
    $id = $_POST["bookingID"];


    $cancelFlightBookingsSQL = "UPDATE `flightbookings` SET cancelled='yes' WHERE bookingID='$id'";
    $cancelFlightBookingsQuery = $conn->query($cancelFlightBookingsSQL);

My question is how do I make jQuery identify which booking the user wants to be cancelled? I mean how do I assign an id to the <td> so that I can retrieve its value in the JS.

我的问题是如何让jQuery识别用户想要取消的预订?我的意思是如何为分配一个id,以便我可以在JS中检索它的值。

I know I could not frame this question properly. SORRY ABOUT THAT.

我知道我无法正确构建这个问题。对于那个很抱歉。

Thanks

2 个解决方案

#1

There's a couple of issues here. Firstly you need to use a class for the span instead of an id, otherwise it will be duplicated in the DOM by your PHP loop, which will result in invalid HMTL that will break your click event handler.

这里有几个问题。首先,您需要使用span而不是id的类,否则它将被PHP循环复制到DOM中,这将导致无效的HMTL将破坏您的click事件处理程序。

Once you've done that you need to set the id variable value within the click handler so that you can find the td related to the clicked element. You can do that like this:

完成后,您需要在单击处理程序中设置id变量值,以便您可以找到与单击元素相关的td。你可以这样做:

<!-- repeated throughout your while loop -->
<td class="text-center">
  <span class="fa fa-remove tableElementTags pullSpan deleteAccount"></span>
</td>

$('.deleteAccount').click(function() {
  var id = $(this).closest('tr').find('td:first').text().trim();

  $.ajax({
    type: "POST",
    url: 'cancelTicket.php',
    data: {
      bookingID: id
    },
    success: function() {
      alert("Cancelled");
    }
  });
});

#2

From the clicked element:

从点击的元素:

$('#deleteAccount').click(function() {

You can navigate the DOM to find the element you want. First, add a class to that target element:

您可以导航DOM以查找所需的元素。首先,为该目标元素添加一个类:

<td class="tableElementTags text-center bookingID"><?php echo $flightTicketsRow["bookingID"]; ?></td>

Next, also put that Booking ID value in a data attribute for easy programmatic access (personal preference, since things like text content can easily change):

接下来,还将该预订ID值放在数据属性中,以便于编程访问(个人偏好,因为文本内容之类的内容很容易改变):

<td class="tableElementTags text-center bookingID" data-booking="<?php echo $flightTicketsRow["bookingID"]; ?>"><?php echo $flightTicketsRow["bookingID"]; ?></td>

Now from within the click handler you can navigate up the DOM to the closest common parent element and then back down to the target element with the data you want. Something like this:

现在,从单击处理程序中,您可以将DOM向上导航到最近的公共父元素,然后使用所需数据向下返回到目标元素。像这样的东西:

$('#deleteAccount').click(function() {
    var id = $(this).closest('tr').find('.bookingID').data('booking');
    // the rest of your click handler
});

#1