ajax a href onclick get php variable and execute p

问题:

Before I ask this question, I have already referred to the example of this question. However, it seems doesn't work. Without using ajax, I can get my post deleted but after implement ajax, the deleteAtc.php seems to be not working.

My delete page code (delete.php)

    <h4>Select an Article to Delete:</h4>

    <?php foreach ($articles as $article) { ?>

        <span><?php echo $article['article_title']; ?></span> <a href="#" id="link">Delete</a><br />

        <script type="text/javascript">
        $(function(){
            $('#link').click(function(){
                var id = <?php echo $article['article_id']; ?>;
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id"+id+,
                    sucess: function() {
                        $('#sucess').html(data);
                    }
                })
                return false;
            });
        });
        </script>
        <div id="success"></div><br />
    <?php } ?>

While my deleteAtc.php code:

<?php 

session_start();

include_once('../includes/connection.php');

if (isset($_SESSION['logged_in'])) {
    if (isset($_GET['id'])) {
        $id = $_GET['id'];

        $query = $pdo->prepare('DELETE FROM articles WHERE article_id = ?');
        $query->bindValue(1, $id);
        $query->execute();

        echo "Article deleted";
    }
}    
?>

What I'm trying to do here is to delete the record without redirect to deleteAtc.php, it will remove out the record and replace Article Deleted

May I know where did I go wrong in ajax side?

Please refer below for updated question

---

Based on the answer below, here is my updated code:

delete.php

<h4>Select an Article to Delete:</h4>

<div id="message"></div>

<?php foreach ($articles as $article) { ?>

<span><?php echo $article['article_title']; ?></span> 
<a href="#" class="link" data-artid="<?php echo $article['article_id']; ?>">Delete</a><br />
<?php } ?>

script

<script type="text/javascript">
        $(function(){
            $('.link').click(function(){
                var elem = $(this);
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id="+elem.attr('data-artid'),
                    dataType:"json",  
                    success: function(data) {
                        if(data.success){
                               elem.hide();
                               $('#message').html(data.message);
                        }
                    }
                });
                return false;
            });
        });
        </script>

deleteAtc.php

<?php 

session_start();

include_once('../includes/connection.php');

if (isset($_SESSION['logged_in'])) {
    if (isset($_GET['id'])) {
        $id = $_GET['id'];

        $query = $pdo->prepare('DELETE FROM articles WHERE article_id = ?');
        $query->bindValue(1, $id);
        $query->execute();

        //Also try to handle false conditions or failure
        echo json_encode(array('success'=>TRUE,'message'=>"Article deleted"));
    }
}    
?>

Somehow, if I delete two record at a time, only the first record echo the result, the second result deleted doesn't echo out the result.

Am wondering, possible to add jquery animation to .show the success message and .hide the record deleted?

回答1:

First of all IDs are not meant to be duplicated, use class selector instead. Also you could make use of custom data attributes to store the id of the article.

Try

<h4>Select an Article to Delete:</h4>

<div id="message"></div>

<?php foreach ($articles as $article) { ?>

<span><?php echo $article['article_title']; ?></span> 
<a href="#" class="link" data-artid="<?php echo $article['article_id']; ?>">Delete</a><br />
<?php } ?>

Script

<script type="text/javascript">
        $(function(){
            $('.link').click(function(){
                var elem = $(this);
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id="+elem.attr('data-artid'),
                    dataType:"json",  
                    success: function(data) {
                        if(data.success){
                               elem.hide();
                               $('#message').html(data.message);
                        }
                    }
                });
                return false;
            });
        });
        </script>

And in server side

<?php 

session_start();

include_once('../includes/connection.php');

if (isset($_SESSION['logged_in'])) {
    if (isset($_GET['id'])) {
        $id = $_GET['id'];

        $query = $pdo->prepare('DELETE FROM articles WHERE article_id = ?');
        $query->bindValue(1, $id);
        $query->execute();

        //Also try to handle false conditions or failure
        echo json_encode(array('success'=>TRUE,'message'=>"Article deleted"));
    }
}    
?>

回答2:

The above script won't work you have to change like below. You are repeating the same identifier function again and again. Keep the jquery script out of foreach loop. You have to add the class property with the article id.

<h4>Select an Article to Delete:</h4>

    <?php foreach ($articles as $article) { ?>

        <span><?php echo $article['article_title']; ?></span> <a href="#" id="link" class='<?php echo $article['article_id']; ?>' >Delete</a><br />

        <div id="success"></div><br />
    <?php } ?>


        <script type="text/javascript">
        $(function(){
            $('#link').click(function(){
                var id = $(this).prop('class');
                $.ajax({
                    type: "GET",
                    url: "deleteAtc.php",
                    data: "id="+id,
                    sucess: function() {
                        $('#sucess').html(data);
                    }
                })
                return false;
            });
        });
        </script>

回答3:

You create several links with id="link". ID must be unique.

You have to write

id="link<? echo $article['article_id']; ?>"

as well as

$('#link<? echo $article["article_id"]; ?>').click(function() {...})

回答4:

<script language="javascript">
$(document).ready(function() {

    $(".delbutton").click(function(){
    var element = $(this);      
    var del_id = element.attr("id");
    var info = 'id=' + del_id;
        if(confirm("Sure you want to delete this record? There is NO undo!"))
        {
            $.ajax({
                 type: "GET",
                url: "products/delete_record.php",
                data: info,
                cache: false,
                success: function(){
                    setTimeout(function() {
                        location.reload('');
                    }, 1000);
                }
            });
                $(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
                .animate({ opacity: "hide" }, "slow");      
        }
        return false;
        //location.reload();
    });
});
</script>