Want to use AJAX to refresh content after clicking submit button

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

Why not set the id attribute of the card to the id in the database. When you delete it, upon returning the result with ajax, hide the deleted card by targetting the id of the card div or whatever, and using the hide() method in JQuery. — OllyBarca, Jun 05 '15 at 16:34

score 0 · Answer 1 · answered Jun 05 '15 at 16:40

0

If you have to reload page after successful ajax request, you can use location.reload(); on success function like:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  location.reload();
});

answered Jun 05 '15 at 16:40

Bishal Paudel

1,896
2
21
28

OllyBarca · Accepted Answer · 2015-06-06T23:22:09.433

0

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();
        }
    });
});

edited Jun 06 '15 at 23:22

answered Jun 05 '15 at 16:58

OllyBarca

1,501
1
18
35

1

Thanks for replying. I've put the delete sccript in a separate script and changed the form into the button. When I click the delete button unfortunatly nothing happens yet. In firefox debug console i get this: SyntaxError: missing } after property list on the line of dataType – ragoutje Jun 05 '15 at 21:53
Hi again, try it now, I made a few adjustments to the way the data is passed in within the ajax method. – OllyBarca Jun 05 '15 at 23:17
Thanks again for helping. I have got the ajax working but the php if isset post is not running true yet. I updated my post to reflect the changes i made – ragoutje Jun 06 '15 at 07:48
Can you console.log(card_id); in the JavaScript after it is initialised? If that isn't holding the ID of the card, it won't be passing it to the delete PHP script correctly. – OllyBarca Jun 06 '15 at 07:57
I've just noticed, you have an error in your delete_card.php. You are checking if $_POST['del_id'] is set, but then assigning $_POST['card_id'] inside the IF statement. Match the $_POST variable names and try again. – OllyBarca Jun 06 '15 at 08:06
I used at the bottom of my index.php. Is that the correct way? It returns `ReferenceError: card_id is not defined` In the console. So I guess it's not holding the value – ragoutje Jun 06 '15 at 08:07
use the consode.log(card_id); right after var card_id = $(this).attr('id'); – OllyBarca Jun 06 '15 at 08:08
Also, inspect the button element and see what the ID value is, ensure it is being set in the markup. Is the column name "id" present in your table? I assumed that is what you called your primary id column. – OllyBarca Jun 06 '15 at 08:12
The Id is set, every instance of the button has the id of the card. When i place the console.log just beneath the var card_id I get nothing in my console. Edit: setting both post values to either card_id or del_id gave no change. ID is the first column in my table and is set as primary key – ragoutje Jun 06 '15 at 08:18
inside the onclick, type alert($(this).attr('id')); See what value is alerted. – OllyBarca Jun 06 '15 at 08:23
Hang on, replace Delete with – OllyBarca Jun 06 '15 at 08:25
I have this in my js: `var card_id = $(this).attr('id'); alert($(this).attr('id'));` It shows the id in a popup. So I guess it's saving the id in the var. I also changed the / in button – ragoutje Jun 06 '15 at 19:13
Yes! I found the answer here: `http://stackoverflow.com/questions/17911472/jquery-ajax-post-to-php-file-not-working` my ajax now looks like this: `data:{'card_id':card_id},;` – ragoutje Jun 06 '15 at 19:49

Want to use AJAX to refresh content after clicking submit button

2 Answers2