单击“提交”按钮后，要使用AJAX刷新内容

Question

Currently I have a database filled with collectible cards. I'm using php to display the cards from my database and this is working fine. The output includes a button to delete that specific card. The AJAX works when clicked but the card is not removed.

I have index.php which is just a html page with:

<?php include 'showallcards.php';?>

Showallcards.php:

        <?php
require_once 'connectdb.php';

$serielijst = "SELECT naam, jaar FROM series ORDER BY jaar ASC";
$serieresult = $conn->query($serielijst);
while($row = $serieresult->fetch_assoc()) {

    echo '<div class="serie" id="' . $row["naam"] . '">';
    echo "<h2>" . $row["naam"]. " </h2> " . $row["jaar"]. "<br />";
    $sql = "SELECT * FROM cards WHERE serie = '". $row["naam"] . "' ORDER BY cardname ASC";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        echo '<ul id="cardsul">';
        while($row = $result->fetch_assoc()) {
            echo '<li class="card" id="' . $row["id"] . '"><a href="'. $row["img"] .'"><img src="'. $row["img"] .'"/></a>';
            echo 'Card<br/><h4>' .$row["cardname"] . '</h4>Type<h4>' . $row["cardtype"] . ' - ' . $row["cardsubtype"]. '</h4></br>Serie<h4>' . $row["serie"]. '</h4>Rarity<h4>' . $row["rarity"]. '</h4>Manacost<h4>' . $row["manacost"].  '</h4>Color<h4>' . $row["color"]. '</h4>Artist<h4>' . $row["artist"]. '</h4>Power / Toughness<h4>' . $row["power"] . ' / ' . $row["toughness"] . '<br/>';
            echo '<div class="status" id="wanted">' . $row["want"] . '</div>';
            echo '<div class="status" id="favorited">' . $row["favorite"] . '</div>';
            echo '<div class="status" id="collectioned">' . $row["incollection"] . '</div>';
            echo '<div class="status" id="del_wrapper"><button id="'.$row['id'].'">Delete</button></div>';
            echo '</li>';
        }
        echo '</ul><div class="clear"></div>';
    } else {
        echo "0 results";
    }
echo "</div>";
}
?>

In this script I fetch all the cards and display them. Also there is included a button to delete a specific card when pressed.

The php file for deleteing is delete_card.php:

<?php
if (isset($_POST['del_id'])) {
    $del_id = $_POST['del_id'];
    $del_sql="DELETE FROM cards WHERE id='$del_id'";
    $del_result = $conn->query($del_sql);
}
?>

I've tested if the file is loaded by echoing a simple text.

With the help of the ajax code from one of the commentors I've got this far:

$(document).ready(function(){
    $("button").click(function(){
        var card_id = $(this).attr('id');
        $.ajax({
            url: "/goblins/delete_card.php", 
            method: "POST",
            data: {del_id: card_id},
            success: function(result){
             $('li[id="' + card_id + '"]').fadeOut();
        }});
    });
});

This loads the php file because success is working. The card is faded out but when I reload the page the card returns and is not deleted from the database. I figure it's because if (isset($_POST['del_id'])) is not returning true yet. Who can help me out? Much apreciated!

Raoul

Answer 1

Add the row id as an attribute of each <li> element in your while loop:

echo '<li id="'$row[id]'"class="card"><a href="'. $row["img"] .'"><img src="'. $row["img"] .'"/></a>';
        echo 'Card<br/><h4>' .$row["cardname"] . '</h4>Type<h4>' . $row["cardtype"] . ' - ' . $row["cardsubtype"]. '</h4></br>Serie<h4>' . $row["serie"]. '</h4>Rarity<h4>' . $row["rarity"]. '</h4>Manacost<h4>' . $row["manacost"].  '</h4>Color<h4>' . $row["color"]. '</h4>Artist<h4>' . $row["artist"]. '</h4>Power / Toughness<h4>' . $row["power"] . ' / ' . $row["toughness"] . '<br/>';
        echo '<div class="status" id="wanted">' . $row["want"] . '</div>';
        echo '<div class="status" id="favorited">' . $row["favorite"] . '</div>';
        echo '<div class="status" id="collectioned">' . $row["incollection"] . '</div>';
        echo '<div class="status del_wrapper" id="' . $row["id"] . '"><button id="'.$row['id'].'">Delete</button></div>';
        echo '</li>';

Then put your delete script in a separate php file and call it with AJAX when deleting a card:

// DELETE SCRIPT (in separate file delete.php)
if (isset($_POST['del_id'])) {
    $del_id = $_POST['del_id'];
    $del_sql="DELETE FROM cards WHERE id='$del_id'";
    $del_result = $conn->query($del_sql);
    echo $del_result;
}

Then on delete click, call the delete.php script with AJAX and on success, hide the li element for that card (remember to include JQuery if you haven't already):

$("button").click(function() {
    var card_id = $(this).attr('id');
    $.ajax({
        url: "delete.php",
        method: "POST",
        data:{'del_id':card_id},
        success: function() {
            $('li[id="' + card_id + '"]').hide();
        }
    });
});