Something wrong with my button delete

Question

I've a problem with my button delete. Picture

If I press delete in line 1, the alert will show it. But, if I press the button delete in line 2 - n, It will not show the alert.

This is my JS and HTML code

   <script type="text/javascript">
     $('#AlertDelete').click(function(e) {
      
       swal({
           title: "Yakin akan menghapus data?",
           text: "Data yang sudah dihapus tidak akan bisa dikembalikan",
           type: "warning",
           showCancelButton: true,
           confirmButtonColor: '#DD6B55',
           confirmButtonText: 'Iya, hapus data!',
           cancelButtonText: "Batalkan!",
           confirmButtonClass: "btn-danger",
           closeOnConfirm: false,
           closeOnCancel: false
         },

         function(isConfirm) {
           if (isConfirm) {
            var data = $(this).serialize(); 
         $.post('<?php echo base_url();?>index.php/agen/delete/<?php echo $row['id_agen'];?>', data);
           swal("Terhapus!", "Data berhasil dihapus. Kamu akan diarahkan ke halaman sebelumnya secara otomatis", "success");
       setTimeout("location.href = 'http://localhost/cvatikan/index.php/buku';",1000);
           } else {
             swal("Dibatalkan", "Hapus data dibatalkan", "error");
           }
         });
     });
    </script>

  <h2 class="view-title">Kelola Agen</h2>
  <div id="masonry" class="row">
   <div class="module-wrapper masonry-item col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <section class="module module-headings">
     <div class="module-inner">
      <div class="module-heading">
       <h3 class="module-title">Daftar Agen</h3>
       <ul class="actions list-inline">
        <li><a href="<?php echo base_url();?>index.php/Agen/manage"><span class="icon icon_plus"></span></a></li>
        <!--<li><button type="button" class="btn btn-xs btn-primary" data-dismiss="modal"><span class="icon icon_plus"></span></button></li>-->
       </ul>
       
      </div>
       <div class="module-content collapse in" id="content-1">
        <div class="module-content-inner no-padding-bottom">
         <div class="table-responsive">
          <!-- di sini kontenny -->
         <table id="datatables-1" class="table table-striped display">
          <thead>
           <tr>
            <th>No</th>
            <th>ID Agen</th>
            <th>Nama Agen</th>
            <th>Alamat</th>
            <th>No. Telp</th>
            <th>Keterangan</th>
            <th>Action</th>
           </tr>
          </thead>
          <tbody>
           <?php if(@$result):?>
            <?php $i = 1;?>
            <?php foreach ($result as $row):?>
             <tr>
              <td><?php echo $i++;?></td>
              <td><?php echo $row['id_agen'];?></td>
              <td><?php echo $row['nama_agen'];?></td>
              <td><?php echo $row['alamat'];?></td>
              <td><?php echo $row['no_telp'];?></td>
              <td><?php echo $row['keterangan'];?></td>
              <td>
              <a href="<?php echo base_url();?>index.php/agen/manage/<?php echo $row['id_agen'];?>"class="btn btn-xs btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit</a>
              <a class="btn btn-xs btn-danger" id="AlertDelete"><i class="fa fa-trash"></i>Delete</a>
              </td>
             </tr>
            <?php endforeach?>
           <?php endif?>
          </tbody>
         </table>
         </div>
        </div>
       </div>
      </div>
     </section>
    </div>
   </div>

I hope somebody can help me fix this problem. Thx before :)

score 0 · Answer 1 · edited May 23 '17 at 12:16

0

I'm not sure if this is your issue, but I would be using a class rather than an id for your button. It's best not to have multiple controls with the same id (it violates the W3C specification).

For more information see this post

edited May 23 '17 at 12:16

Community

1
1

answered Jan 16 '17 at 18:02

MikeS

1,734
1
9
13

I've tried to change it to class and it works. Thanks dude! :D – Kgs. Azzam Nizar Jan 16 '17 at 18:05

score 0 · Accepted Answer · answered Jan 16 '17 at 18:07

Since you are dynamically binding data with your UI ,you don't have to use id for click event. Instead of this use class name to call your click event.

Just make "AlertDelete" as class name as shown in below code

<tbody>
                                        <?php if(@$result):?>
                                            <?php $i = 1;?>
                                            <?php foreach ($result as $row):?>
                                                <tr>
                                                    <td><?php echo $i++;?></td>
                                                    <td><?php echo $row['id_agen'];?></td>
                                                    <td><?php echo $row['nama_agen'];?></td>
                                                    <td><?php echo $row['alamat'];?></td>
                                                    <td><?php echo $row['no_telp'];?></td>
                                                    <td><?php echo $row['keterangan'];?></td>
                                                    <td>
                                                    <a href="<?php echo base_url();?>index.php/agen/manage/<?php echo $row['id_agen'];?>"class="btn btn-xs btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit</a>
                                                    <a class="btn btn-xs btn-danger AlertDelete"><i class="fa fa-trash"></i>Delete</a>
                                                    </td>
                                                </tr>
                                            <?php endforeach?>
                                        <?php endif?>
                                    </tbody>


And change below code in js

    <script type="text/javascript">
                        $(document).
    on('click','.AlertDelete',function(e) {

                          swal({
                              title: "Yakin akan menghapus data?",
                              text: "Data yang sudah dihapus tidak akan bisa dikembalikan",
                              type: "warning",
                              showCancelButton: true,
                              confirmButtonColor: '#DD6B55',
                              confirmButtonText: 'Iya, hapus data!',
                              cancelButtonText: "Batalkan!",
                              confirmButtonClass: "btn-danger",
                              closeOnConfirm: false,
                              closeOnCancel: false
                            },

                            function(isConfirm) {
                              if (isConfirm) {
                                var data = $(this).serialize(); 
                                $.post('<?php echo base_url();?>index.php/agen/delete/<?php echo $row['id_agen'];?>', data);
                                swal("Terhapus!", "Data berhasil dihapus. Kamu akan diarahkan ke halaman sebelumnya secara otomatis", "success");
                                setTimeout("location.href = 'http://localhost/cvatikan/index.php/buku';",1000);
                              } else {
                                swal("Dibatalkan", "Hapus data dibatalkan", "error");
                              }
                            });
                        });
                    </script>

Can you please explain your problem in detail by creating new question and maintaining source code like this question — Gauri Bhosle, Jan 16 '17 at 18:26

Something wrong with my button delete

2 Answers2