删除数据库中的上一行，通过单击按钮显示数据库中的下一行

Question

I need Help on this, base on what I already did: In the output every time I click the button it shows the row (comments) in database. But I want that If I click the next button it will show the row (comments) in the database and when I click it again It will delete the previous row (comments) in the database and show the next row (comments).

Here is the code:

<?php
    include 'dbh.php';

    $commentNewCount = $_POST['commentNewCount'];

    $sql = "SELECT * FROM comments LIMIT $commentNewCount";
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            echo $row['id'];
        }
    } else {
        echo "There are number!";
    }
?>

This is for the button:

<script>
//jQuery code here!
$(document).ready(function() {
    var commentCount = 0;
    $("button").click(function() {
        commentCount = commentCount + 1;
        $("#comments").load("load-comments.php", {
            commentNewCount: commentCount
        });
    });
});
</script>

Answer 1

You have AJAX tagged in your question, so I am assuming that you are somewhat familiar with the term. This can indeed be done by AJAX, but I don't see any AJAX attempts in your code?

Also, when you say delete , do you mean specifically delete by the literal sense, or simply that your comment display works as sort of a sliding function, removing the previous comment from display, showing the next comment in queue? I am going by the literal sense in my example, since that's what I have to assume really.

What you could do, is to have a file that handles all the comments, and displays them however you like. For instance,

<?php
$sql="SELECT * FROM comments ORDER BY id DESC";
$result_set=mysqli_query($conn, $sql);
while ($row=mysqli_fetch_assoc($result)) {
   /*
   html construction of displaying comments,
   echo'ing the row value that displays the comments.
   echo $row['comments']; as a guess
   */
}
?>

Let's call that PHP file comments.php for the sake of referencing later on. Also note, that I chose to make an ORDER BY in a descending order. Assuming your comment id is an auto increment, then this will always display the newest comments first, since the highest id's will be the latest entries.

Then, in another file, display-comments.php as an example, you could make a document.ready function, that loads your comments into an element, <div> element for example.

The AJAX function could look like this:

$( document ).ready(function() {
    function loadCommentsAjax()
    {   
        $.ajax({
            type : "POST",
            url : "comments.php",
            data : { },
            success: function (html) {
              $("#commentContainer").html(html);                   
            }
        })
    }
});

What I do here, is that I encapsulate an AJAX function in a document.ready function. What this does, is that when the document is ready, it fires the AJAX function.

How the AJAX function works, is that we declare a data type. The most common are probably POST and GET . You can look up the different data types, how to handle them, and what they mean specifically. The main difference between POST and GET for instance, is that GET displays its values as parameters in the URL. Since we aren't parsing any data, we could use a GET just fine, since it will have no influence. However, should you ever need to parse sensitive data, where you don't want the user to mingle with the data, then you should use POST .

We then tell the AJAX function, which page/file it should work with. In our example, it will be the comments.php that we created earlier. It will then in the success function, paste the html content into a container that we defined. In this case, commentContainer . Note that it's an id specific targeting, which means our container element needs to have that specific id . Note, that the container is in our main file, the display-comments.php file.

An example of the container could be the following:

<div id="commentContainer"></div>

This div element will then contain the comments and html logic that we made in our comments.php file.

In your button, you can then have another AJAX function, handling the comment deletion, and call our loadCommentsAjax() function on success, to reload our comments in the appropriate fashion.

The AJAX function handling the deletion of comments, would then again have a PHP file that will perform the delete. We'll call this delete-comments.php in our example.

example of our delete AJAX function:

function deleteNewestComment() {
    $.ajax({
        type : "POST",
        url : "delete-comments.php",
        data : { },
        success: function (html) {
          loadCommentsAjax();                   
        }
    })
}

Our delete-comments.php will look something like this:

<?php
/*
since you are deleting the latest entry each time, what we could do,
is make an SQL query that deletes the max id from the comments table
*/

$sql="DELETE FROM comments WHERE id=(SELECT max(id) FROM comments)";
$result=mysqli_query($conn, $sql);
?>

We will then have our button call the delete function like so:

<button onclick="deleteNewestComment();">Delete latest comment</button>

Let me know if this is what you were looking for at all, or whether you really just wanted a sliding kind of logic, where you simply iterate through your comments, displaying one at a time.

But in case you did mean literally delete , then wouldn't it be better to have delete buttons linked to each comment, so that you can delete them seperately, and independantly?