How to delete an element using Ajax and anchor tag?

I am trying to create a tagging system like stack overflow. So every tag has a small x beside it so that when a user deletes it, it would be deleted from the database too dynamically. Only users who entered the tags can delete them. I am using an anchor tag for the x and sending the request using Ajax to a php script which would delete the element as follows:

<?php
    require_once("database_connection_handler.php");
    $x=$post->ID; 
    $i=0;
    $select_query = "Select * from wp_tags inner join wp_posts_tags on wp_posts_tags.tag_id=wp_tags.id where wp_posts_tags.post_id='". $x . "'";
    $result = mysql_query($select_query);
    $num=mysql_num_rows($result);
    echo "</ul>";
    echoTagHTML();
    while ($i < $num) {
        $tag=mysql_result($result,$i,"tag");
        $id=mysql_result($result,$i,"id");
        echo "<li>";
        tagLinks($tag,$id);
            if(is_current_user())
            {
            echo "<a href='javascript:void(0)' onclick='deleteTag($id);'>&nbsp x</a>";
            }   
            echo "</li>";
            $i++;
}echo "</ul></div>";

?>

The Ajax code that handles this is:

function deleteTag(str){
    if (str.length != 0){
            if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();}
            else{// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
                xmlhttp.open("GET","links/livesearch.php?del="+str,true);
                xmlhttp.send();
                            }
    else{return;}
}

The php script is:

<?php 
$del=$_GET["del"];
ConnectToDB();
$delete_query="delete from wp_tags where id='".$del."'";
    if(!mysql_query($delete_query))
    {
        echo "error while deleting";
    }
mysql_close($con);
?>

I am really new to Ajax. When I am clicking on the link which is supposed to delete the user it is not deleting anything. It is not removing the tag from the database or removing the link from the page. What am I missing? Any help would be appreciated. Thanks.

Answers


Noting that you tagged the question "jQuery" and assuming HTML to be something like this :

<div id="tagsContainer">
    <div class="tagWrapper">
        <a href="..." class="tag">php</a>
        <button class="tagDelete">X</button>
    </div>
    <div class="tagWrapper">
        <a href="..." class="tag">javascript</a>
        <button class="tagDelete">X</button>
    </div>
</div>

your javascript will be something like this :

$(function() {
    $("#tagsContainer").on('click', ".tagDelete", function() {
        var $deleteButton = $(this).attr('disabled', true),
            $wrapper = $deleteButton.closest(".tagWrapper"),
            $tag = $wrapper.find('.tag');
        $.ajax({
            url: "links/livesearch.php"
            data: {
                action: 'tagdelete',
                tag: $tag.text(),
                //other params here, eg. to identify the user and the context of the deletion
            },
            success: function(data, textStatus, jqXHR) {
                $wrapper.remove();
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $deleteButton.attr('disabled', false),
                //display error message?
            }
        });
    });
});

Essentially, this puts in place a handler which will respond to all .deleteTag buttons within #tagsContainer, by making an ajax call and, when a successful response is received from the server, removing the tag (and its .deleteTag button) from the DOM.

There's a lot of guesswork here so you still have some work to do (and debug the server-side script).


Need Your Help

How to make an existing SVN branch read only to all users?

svn tortoisesvn

I have an existing SVN branch. I've created a new branch.

VS2008 C# : Regular expression and identifying certain words

c# regex

I would like to use Regular expression to identify certain words in a string.