Delete row from table and use bootstrap modal as confirmation

Question

I'm looking to delete a row from a table of users in my codeigniter framework project.

I want to click the delete button, and have a modal window popup asking the user, if they are sure to delete the record, and upon clicking yes I would like to display another one confirming that it is complete.

I'm just having a problem with passing the database dynamic ID to my ajax call without page refresh as I'm not sure how to go about it:-

<div class = "wrapper">
<table class="table table-striped">

    <thead class = "table_head">
    <tr>
        <th>ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Class</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    </thead>
    <tbody class ="searchable">

    <?php echo validation_errors(); ?>
    <?php if (is_array($users)) {?>
<?php foreach($users as $user){?>
    <tr>

        <td><?php echo $user->ID;?></td>
        <td><?php echo $user->first_name;?></td>
        <td><?php echo $user->last_name;?></td>
        <td><?php echo $user->username;?></td>
        <td><?php echo $user->class;?></td>
        <td><a href ="<?php echo base_url().'index.php/User/edit_user/'. $user->ID ;?>"> Edit</a></td>
        <td><a id = "mybutton" data-toggle="modal" data-target="#confirm_delete_modal" data-id="<?php echo $user->ID;?>"> Delete</a></td>



    </tr>
<?php }}
    ?>
    <?php if(!$users){
        echo '<div class="noresults">';
        echo 'No users available';
        echo '</div>';
    }?>
</tbody>
  </table>

As can be seen above in the edit part, I need to pass the $user->ID to the modal window in order to delete the specified user.

  <div id="confirm_delete_modal" class="modal fade" role="dialog">
  <div class="modal-body">
      <p id = "valcomplete"> Are you sure you wish to delete this user?</p>
  </div>
  <a id ="confirmbutton" style = "cursor:pointer;  color:black;">Yes</a>
  <a data-toggle="modal" data-target="#confirm_delete_modal" id ="exitbutton" style = " cursor:pointer; color:black;">No</a>

  <div id="deleted" class="modal fade" role="dialog">
      <div class="modal-body">
          <p id = "valcomplete"> User deleted</p>
      </div>
      <a data-toggle="modal" data-target="#deleted" id ="exitbutton" style = "color:black;">Exit</a>
  </div>

What I have now:

   $('#mybutton').click(function(){
    var ID = $(this).data('id');
    $('#confirm-button').data('id', ID); //set the data attribute on the modal button
});

$('#confirm-button').click(function(){
    var ID = $(this).data('id');
    $.ajax({
        url: "<?php echo base_url(); ?>index.php/Admin/delete_user/"+ID,
        type: "post",
        data:ID,
        success: function (data) {
          $("#confirm_delete_modal").modal('hide');
          $("#deleted").modal('show');

        }
      });
});

Can anyone help me ?? Thanks

Solution

Add another data attribute to your button and set it to the ID of the row you want to delete.

<td><a data-id="some_id" data-toggle="modal" data-target="#confirm_delete_modal"> Delete</a></td>

You can then access it/pass it wherever you want like this:

$('your-button').click(function(){
    var ID = $(this).data('id');
});

---

In your case you need to pass ID through to your modal and then to AJAX so you could dynamically set a data attribute on your modal confirm button:

$('button-that-brings-up-modal').click(function(){
    var ID = $(this).data('id');
    $('#confirm-button').data('id', ID); //set the data attribute on the modal button
});

$('#confirm-button').click(function(){
    var ID = $(this).data('id');
    $.ajax({
        url: "<?php echo base_url(); ?>index.php/Admin/delete_user/" + ID
    });
});

Comments

[user]

would you know how would I go about passing a php variable to it?

[DinosaurHunter]

data-id="<?php echo $user->ID;?>"

[user]

I can't seem to pass the ID from the table to the confirmation modal and then onto the ajax call? If I'm passing the data-id to the confirmation modal, how do I then pass it to the ajax call as I'm only looking for a button click when using ajax? Thanks for the help btw

[user]

nothing seems to be happening when I click the "yes" button in my confirm modal, and nothing seems to come up in the console window either which is strange! Ive updated my code above can you see where I'm going wrong? Thanks again I appreciate it!

[DinosaurHunter]

I would console log ID at each stage. If they're as expected then use Chromes developer console , check the network tab and make sure the URL for the Ajax is correct. If that's all okay then it might be issue in your controller or model.

[user]

I can't seem to get the data-id at all ... when I go to run the function above nothing at all happens but when I call the function via an onclick event I get undefined (as opposed to calling it like "$('button-that-brings-up-modal').click(function(){" ) , I tried hard coding a data-id and that returns undefined also :( @DinosaurHunter