Deleting users from the database using AJAX and Codeigniter

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'];?>
<a  href="<?php echo site_url("users/delete/$id")?>" class="delete">Delete</a>



</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.