Deleting users from the database using AJAX and Codeigniter - php

Question

I'm trying to delete users from the database using AJAX and Code Igniter. When I click the delete link, the user gets deleted but the page gets redirected and success message is displayed. AJAX does not seem to work in my code.
Here's HTML:
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Username</th>
<th>Password</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($users as $u){?>
<tr>
<td><?php echo $u['id']; ?></td>
<td><?php echo $u['firstname']; ?></td>
<td><?php echo $u['lastname']; ?></td>
<td><?php echo $u['email']; ?></td>
<td><?php echo $u['username']; ?></td>
<td><?php echo $u['password']; ?></td>
<td>
<a href="#" >Edit</a> |
<?php $id=$u['id'];?>
Delete
</td>
<?php }?>
</tr>
</tbody>
</table>
and here's AJAX:
$(document).ready(function(){
$(".delete").click(function(){
alert("Delete?");
var href = $(this).attr("href");
var btn = this;
$.ajax({
type: "GET",
url: href,
success: function(response) {
if (response == "Success")
{
$(btn).closest('tr').fadeOut("slow");
}
else
{
alert("Error");
}
}
});
})
});
and lastly the controller function to delete the user in Codeigniter
public function delete($id)//for deleting the user
{
$this->load->model('Users_m');
$delete=$this->Users_m->delete_user($id);
if($delete)
{
echo "Success";
}
else
{
echo "Error";
}
}
Where am I making the mistake?

Answer 1

Just to expand on the correct answers already given here.
Basically, your JS code should look like:
$(document).ready(function(){
$(".delete").click(function(event){
alert("Delete?");
var href = $(this).attr("href")
var btn = this;
$.ajax({
type: "GET",
url: href,
success: function(response) {
if (response == "Success")
{
$(btn).closest('tr').fadeOut("slow");
}
else
{
alert("Error");
}
}
});
event.preventDefault();
})
});
The event.preventDefault() part is important here. As it prevents the browser from taking the default action it takes if you click on an element.
In the case of a link, that would be redirecting you to the url that is defined in the href parameter. Which is what you see happening.
Your manually defined event is always triggered first, so the ajax request is indeed started, but right after that your event handler, the browser starts handling the default action, breaks off the ajax request, and navigates to the clicked link.

Answer 2

Make sure you are setting the correct object to the 'btn' var:
var btn = $(this);
See if this is the issue!
by the way you are missing a semicolon in:
var href = $(this).attr("href")

Answer 3

the default action of the event should not be triggered.
For this use event.preventDefault()

Answer 4

$(".delete").click(function(e){
e.preventDefault();
...

Answer 5

You are not preventing the default behavior of the anchor so it will redirect you and make the ajax request
$(document).ready(function(){
$(".delete").click(function(e){
alert("Delete?");
e.preventDefault();
var href = $(this).attr("href");
var btn = this;
$.ajax({
type: "GET",
url: href,
success: function(response) {
if (response == "Success")
{
$(btn).closest('tr').fadeOut("slow");
}
else
{
alert("Error");
}
}
});
})
});
I hope this can help :)

Answer 6

First you change the href attribute another attribute like name or value because first time it loads and another time it stores the value in href and after that write this for refreshing page
window.reload('true');
this will surely help you