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?

Aeolun · Accepted Answer · 2013-04-21 06:54:54Z

4

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.

answered Apr 21, 2013 at 6:54

Aeolun

7568 silver badges15 bronze badges

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

2 Comments

sabin Over a year ago

you were right event.preventDefault() helped.I tried to add alert() that says that the user has been deleted but fadeOut() didn't work. Why is that?

Aeolun Over a year ago

Hmm, the code for fadeOut looks correct to me. I'm not sure whether table rows can be faded though. Maybe you can try it simply with .hide() instead.

deviloper · Accepted Answer · 2013-04-21 06:33:41Z

0

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")

answered Apr 21, 2013 at 6:33

deviloper

7,25210 gold badges52 silver badges79 bronze badges

1 Comment

deviloper Over a year ago

you can always check the answers as accepted or vote them up if them work for you!

GBD · Accepted Answer · 2013-04-21 06:46:30Z

0

the default action of the event should not be triggered.

For this use event.preventDefault()

edited Apr 21, 2013 at 6:46

answered Apr 21, 2013 at 6:32

GBD

16k2 gold badges49 silver badges52 bronze badges

1 Comment

Aeolun Over a year ago

I think you meant, 'the default action of the event should not be triggered'?

Amir · Accepted Answer · 2013-04-21 06:48:26Z

0

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

answered Apr 21, 2013 at 6:48

Amir

4,1314 gold badges18 silver badges28 bronze badges

Comments

Seder · Accepted Answer · 2013-04-21 10:30:58Z

0

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 :)

answered Apr 21, 2013 at 10:30

Seder

2,7632 gold badges24 silver badges43 bronze badges

Comments

Faisal Alam · Accepted Answer · 2021-08-03 12:57:45Z

0

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

edited Aug 3, 2021 at 12:57

answered Nov 2, 2017 at 7:57

Faisal Alam

11 bronze badge

Collectives™ on Stack Overflow

Deleting users from the database using AJAX and Codeigniter

6 Answers 6

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related