How can I cancel delete action with confirm prompt window? - php

Question

After I click "Cancel" in the alert window, the delete is still happening!
How can I solve this?
I am using MySQL database.
Working test ToDo list: http://qrmobile.net/todo/index.php
Delete code below, then index page code...
NEW CODE SNIPPET BELOW: Is ajax giving me the problem?
// Delete entry
$('a.deleteEntryAnchor').click(function() {
var thisparam = $(this);
thisparam.parent().parent().find('p').text('Please hold your onions.... ☺');
$.ajax({
type: "GET",
url: thisparam.attr('href'),
success: function() {
thisparam.parent().parent().fadeOut('fast');
}
});
return false;
});
require 'db.php';
$db = new Db();
$response = $db->delete_by_id($_GET['id']);
header("Location: index.php");
<div id="container">
<header><img src="/todo/images/heading-trans.gif"></header>
<ul id="tabs">
<li id="todo_tab" class="selected">
To-Do
</li>
</ul>
<div id="main">
<div id="todo">
<?php
require 'db.php';
$db = new Db();
$query = "SELECT * FROM todo ORDER BY id asc";
$results = $db->mysql->query($query);
if($results->num_rows) {
while($row = $results->fetch_object()) {
$title = $row->title;
$description = $row->description;
$id = $row->id;
echo '<div class="item">';
$data = <<<EOD
<h4>$title</h4>
<p>$description</p>
<input type="hidden" name="id" id="id" value="$id" />
<div class="options">
<a class="deleteEntryAnchor" href="delete.php?id=$id">Delete</a>
<a class="editEntry" href="#">Edit</a>
<a class="save-button" href="index.php">Save</a>
</div>
EOD;
echo $data;
echo '</div>';
} // end while
}
else {
echo "<p>There are zero items. Add one now! </p>";
}
?>
</div><!--end todo-->
<div id="addNewEntry">
<h2>Add New Entry</h2>
<form action="addItem.php" method="post">
<p><label for="title"> Title</label>
<input type="text" name="title" id="title" class="input" required/></p>
<p><label for="description"> Description</label>
<textarea name="description" id="description" required></textarea></p>
<p><input type="submit" name="addEntry" id="addEntry" value="Add New Entry" /></p>
</form>
</div><!--end addNewEntry-->
</div><!--end main-->
</div><!--end container-->
<script>
//Do all this when the DOM is loaded
$(function() {
//get all delete links (Note the class I gave them in the HTML)
$("a.deleteEntryAnchor").click(function() {
//Basically, if confirm is true (OK button is pressed), then
//the click event is permitted to continue, and the link will
//be followed - however, if the cancel is pressed, the click event will be stopped here.
return confirm("Are you sure you want to delete this?");
});
});
</script>

Answer 1

Its basically your js is where the issue lies and needs a preventDefault, I assume, and its not really returning anything to any function that stops the form post.
$("a.deleteEntryAnchor").click(function(e){
if(!confirm("Are you sure you want to delete this?")){
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='deleteEntryAnchor' href='www.stackoverflow.com'>delete</a>

Answer 2

$(function() {} only guards against the situation where your javascripts try to do things before the DOM has finished loading.
On big pages, it's entirely possible that your user clicks that link so fast that no javascripts have been loaded. So the browser is half way loading the page, the user issued a command to go to a different link, so it does the right thing by redirecting the user, instead of finish loading the current page.
You will want to have either have a return false on the onclick attribute of the anchor (safest) or e.preventDefault() in the jQuery click function.