Why this ajax jquery php to do list delete action doesn't work?

Question

I tested source code from this tutorial http://query7.com/php-jquery-todo-list-part-1 and just deploy their source taken here http://query7.com/wp-content/uploads/php-jquery-todolist.zip

To my surprise after delete action, I refreshed the screen but item is still not deleted

enter image description here

I can't see any bug in code can you ?

process.php

<?php
    //Connect to the database
    $connection = mysql_connect('localhost:3316', 'root' , 'root');
    $selection = mysql_select_db('notes', $connection);

    //Was the form submitted?
    if($_POST['submit']){

    //Map the content that was sent by the form a variable. Not necessary but it keeps things tidy.
    $content = $_POST['content'];

    //Insert the content into database
    $ins = mysql_query("INSERT INTO `notes` (content) VALUES ('$content')");

    //Redirect the user back to the index page
    header("Location:index.php");
    }
    /*Doesn't matter if the form has been posted or not, show the latest posts*/

    //Find all the notes in the database and order them in a descending order (latest post first).
    $find = mysql_query("SELECT * FROM `notes` ORDER BY id DESC");

    //Setup the un-ordered list
    echo '<table border="0" cellpadding="5" cellspacing="0" class="list" width="100%">';

    //Continue looping through all of them
    while($row = mysql_fetch_array($find)){

    //For each one, echo a list item giving a link to the delete page with it's id.
    echo '<tr><td valign="middle" width="90%">' . $row['content'] . ' </td>
        <td valign="middle" width="10%"><form id="form" action="delete.php?id=' . $row['id'] . '" method="post">
        <input class="todo_id" name="todo_id" type="hidden" value="' . $row['id'] . '" />
        <input class="todo_content" name="todo_content" type="hidden" value="'  . $row['content'] . '" />
        <input type="image" src="images/delete.png" class="delete" name="delete" width="20px"  />

        </form>
        </td></tr>';
    }

    //End the un-ordered list
    echo '</table>';
?>
<script type="text/javascript">
    $(".delete").click(function(){

        //Retrieve the contents of the textarea (the content)
        var todo_id = $(this).parent().find(".todo_id").val();
        var todo_content = $(this).parent().find(".todo_content").val();

        //Build the URL that we will send
        var url = 'submit=1&id=' + todo_id;

        //Use jQuery's ajax function to send it
         $.ajax({
           type: "POST",
           url: "delete.php",
           data: url,
           success: function(){

        //If successful , notify the user that it was added
           $("#msg").html("<p class='remove'>You just deleted: <i>" + todo_content + "</i></p>");
           $("#content").val('');
           todolist();
           }
         });

        //We return false so when the button is clicked, it doesn't follow the action
        return false;

    });

</script>

delete.php

<?php

    //Connect to the database
    $connection = mysql_connect('localhost', 'root' , '');
    $selection = mysql_select_db('notes', $connection);

    //delete.php?id=IdOfPost
    if($_POST['submit']){
    //if($_GET['id']){
    echo $id = $_POST['id'];
    //$id = $_GET['id'];

    //Delete the record of the post
    $delete = mysql_query("DELETE FROM `notes` WHERE `id` = '$id'");

    //Redirect the user
    header("Location:index.php");

    }

?>

You're not checking result of any of your queries. You need to check what every mysql_query() call returns and check what mysql_error() contains. — Ondřej Mirtes
– Ondřej Mirtes, Commented Jul 21, 2011 at 14:58
Redirection cannot be performed if you write something before! — MatTheCat
– MatTheCat, Commented Jul 21, 2011 at 15:02
@Ondrej thanks that would be my next question but since you answered already :) — user310291
– user310291, Commented Jul 22, 2011 at 16:53
@MathTheCat good remark - that's not my code though it's the tut code — user310291
– user310291, Commented Jul 22, 2011 at 16:53

guido · Accepted Answer · 2011-07-21 15:02:48Z

1

process.php connects to a mysql database instance running on port 3316 with user root and password root, while delete.php connects to a mysql instance running on default port 3306 with user root and empty password: start from there

answered Jul 21, 2011 at 15:02

guido

19.3k6 gold badges74 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user310291 Over a year ago

thanks probably my server uses non default port 3316 I didn't change everywhere :(

cwallenpoole · Accepted Answer · 2011-07-21 15:02:28Z

1

What happens if you put some $_GET variable in your browser and refresh again? http://localhost:8096/todolist?random=idunnosomethingiguess

I suspect that this is a browser caching issue. You can completely prevent this with

header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Of course, if you want to allow caching, then you can just use FF + Web Development toolkit and prevent caching that way.

answered Jul 21, 2011 at 15:02

cwallenpoole

82.4k26 gold badges132 silver badges174 bronze badges

Collectives™ on Stack Overflow

Why this ajax jquery php to do list delete action doesn't work?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related