How to make a confirm deletion pop-up over modal

Question

I'd like to make a confirm deletion using modal over a modal that contain table because with confirm() doesn't work. The table itself is exist on modal. Here's some pictures of my table When I click delete button, it'll show pop-up confirm deletion. But the delete button in confirm deletion pop-up doesn't work. Here's my table code:

<table class="table table-striped table-bordered table-hover table-condensed table-checkable order-column" id="lapkinerja-grafik-admin">
    <thead>
        <tr>
            <th width="5%">No.</th>
            <th width="60%">Nama File</th>
            <th width="25%">Bulan</th>
            <th width="10%">Action</th>
        </tr>
    </thead>
    <tbody>
            <?php 
            $no = 1;
            foreach($grafikAdmin as $key => $row) { 
                $filename = $row['NAMA_FILE'];?>
                <tr class="isi-row">
                    <td><?php echo $no++;?></td>
                    <td>
                        <a href="<?php echo base_url();?>sms/download_grafik/index?fileName=<?php echo $filename;?>"><?php echo $filename;?></a>
                    </td>
                    <td><?php echo $row['BULAN'];?></td>
                    <td>
                        <button id="delete" class="delete-button" value="<?php echo $row['ID_FILE'];?>" data-value="<?php echo $filename;?>" type="button" data-toggle="modal" data-target="#delete-modal">
                            Delete
                        </button>
                    </td>
                </tr>
            <?php } ?>
    </tbody>
</table>

Confirm deletion pop-up code:

<div class="modal fade" id="delete-modal" role="dialog">
    <div class="modal-dialog modal-sm">
        <!--modal delete content start-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <h5>Are you sure to delete this?</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button id="del-alert" class="btn btn-danger btn-del">Delete</button>
            </div>
        </div>
        <!--modal delete content end-->
    </div>
</div>

And here's my javascript code:

$('#lapkinerja-grafik-admin').on('click', '#delete',function(e) {
   e.preventDefault();
   var table = $('#lapkinerja-grafik-admin').DataTable({
       "retrieve": true,
       "columns": [
                   null,
                   null,
                   null,
                   {
                       "sortable": false
                   }
                  ]
   });

   $('#delete-modal').on('show.bs.modal', function() { 
       $('.btn-del').click(function() {
          console.log($(this).parent());
          table.row($(this).parents('.isi-row')).remove().draw(false);
       });

   });

});

`table.row($(this).parents('.isi-row')).remove().draw(false);` this in this context refers to the `delete button` please also check missing `)` — guradio, Oct 23 '18 at 01:23
@guradio Do I need to replace `this` inside `table.row($(this).parents('.isi-row')).remove().draw(false);` with `#delete` id? — aan, Oct 23 '18 at 01:27
@guradio I've changed to `.isi-row` class (`tr`) but it still doesn't work. — aan, Oct 23 '18 at 01:49
better send the index of the tr then use that index during deletion of the item — guradio, Oct 23 '18 at 02:14
may this can help you, i think [this case](https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal) as you experience — Ascaliko, Oct 23 '18 at 02:22
@guradio Delete button is still not working, I've changed it to `tr` — aan, Oct 23 '18 at 02:31
first off..in your table you are using ID delete it should be class because ID is used for unique items..Now after clicking the delete(`change id to class`) send the index of that `tr` into the confirmation modal.. Use that index to remove the correct `tr` — guradio, Oct 23 '18 at 02:36
Please use delete element class not id because you have multiple ids with same name called "delete" so change $('#lapkinerja-grafik-admin').on('click', '#delete',function(e) to $('#lapkinerja-grafik-admin').on('click', '.delete-button',function(e) . — Kishan, Oct 23 '18 at 04:35

score 0 · Answer 1 · answered Oct 23 '18 at 04:39

Please try it out may work :

$('#lapkinerja-grafik-admin').on('click', '.delete-button',function(e) {
  $parent = $(this);
   e.preventDefault();
   var table = $('#lapkinerja-grafik-admin').DataTable({
       "retrieve": true,
       "columns": [
                   null,
                   null,
                   null,
                   {
                       "sortable": false
                   }
                  ]
   });

   $('#delete-modal').on('show.bs.modal', function() { 
       $('.btn-del').click(function() {
          console.log($parent.parent());
          table.row($parent.parents('.isi-row')).remove().draw(false);
       });

   });

});

score 0 · Answer 2 · answered Oct 23 '18 at 06:18

I have changed the button type to Bootsrap confirmation button

 <table class="table table-striped table-bordered table-hover table-condensed table-checkable order-column" id="lapkinerja-grafik-admin">
        <thead>
            <tr>
                <th width="5%">No.</th>
                <th width="60%">Nama File</th>
                <th width="25%">Bulan</th>
                <th width="10%">Action</th>
            </tr>
        </thead>
        <tbody>
                <?php 
                $no = 1;
                foreach($grafikAdmin as $key => $row) { 
                    $filename = $row['NAMA_FILE'];?>
                    <tr class="isi-row">
                        <td><?php echo $no++;?></td>
                        <td>
                            <a href="<?php echo base_url();?>sms/download_grafik/index?fileName=<?php echo $filename;?>"><?php echo $filename;?></a>
                        </td>
                        <td><?php echo $row['BULAN'];?></td>
                        <td>

    <button class="btn btn-primary" data-toggle="confirmation" data-confirmation-event="myevent" value="<?php echo $row['ID_FILE'];?>" data-value="<?php echo $filename;?>">Delete</button>
                        </td>
                    </tr>
                <?php } ?>
        </tbody>
    </table>

Enable confirmations via JavaScript:

$('[data-toggle=confirmation]').confirmation({
  rootSelector: '[data-toggle=confirmation]',
  // other options
});

Official documenation: http://bootstrap-confirmation.js.org/

Thanks for your reply, do I need to download Bootstrap confirmation plugin before I apply the code? — aan, Oct 23 '18 at 06:52
Yes: https://cdn.jsdelivr.net/npm/bootstrap-confirmation2/dist/bootstrap-confirmation.min.js — DPS, Oct 23 '18 at 06:54

How to make a confirm deletion pop-up over modal

2 Answers2