2

I am using twitter boostrap data table in my page.In the same page i had called delete option for each row in a table.While i click the delete button in page1 it opens the confirm dialogue to delete a record,But its not working in other pages.Please refer my workout code here.

My code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Data table with all features</title>
   <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<br>
<div style="width:900px; margin:0 auto; border:0px green dashed;" align="center">
  <table class="table table-bordered" id="sample_1">
    <thead>
         <tr><th>Message</th> <th>Phone</th><th>Event Date</th><th>Message ID</th><th>Institution ID</th></tr>
    </thead>
    <tbody>
             <?php
             error_reporting(E_ALL);
             ini_set('display_errors',1);
             mysql_connect('localhost','root','');
             mysql_select_db('sams');
             $data = mysql_query("SELECT * FROM ( SELECT 1 AS type,institution_id,message,phone,event_date,message_id FROM custom_messages UNION ALL SELECT 2 AS type,institution_id,message,phone,event_date,message_id FROM send_messages) T1 where institution_id = '11' ORDER BY event_date");
             $sno = 0;
             while($record = mysql_fetch_assoc($data))
             {
             ?>
             <tr>
             <td><?php echo $record['message']; ?></td>
             <td><?php echo $record['phone']; ?></td>
             <td><?php echo $record['event_date']; ?></td>
             <td><?php echo $record['institution_id']; ?></td>
              <td><a id=simpleConfirm_<?php echo $sno; ?>" custom-attr="destroy<?php echo $sno; ?>" href="#" class="delete">Delete</a></td>
             </tr>
             <?php
             $sno++;
             }
             ?>

              </tbody>
          </table>
</div>

   <script src="js/jquery-1.8.3.min.js"></script>
   <script type="text/javascript" src="js/jquery.dataTables.js"></script>
   <script type="text/javascript" src="js/DT_bootstrap.js"></script>
   <script src="js/dynamic-table.js"></script>
   <script>
   $(function(){
    $('.delete').on('click',function(){
        var data = $(this).attr('custom-attr')
        confirm(data)
    })
})
   </script>

</body>
</html>

Please help me how to fix the issue. Thanks

Ramki
  • 519
  • 2
  • 9

2 Answers2

1

You can use this code in below the table means it working for me....

<script>
        var $jc = jQuery.noConflict();
        $jc('[id^="simpleConfirm_"]').each(function() {
           $jc(this).confirm();
        });
     </script>
Ramki
  • 519
  • 2
  • 9
0

You should update your "on" statement 

$("#sample_1").on('click','tr',function(){

    var $temp = $(this);
    var $target = $temp.find("td:eq(4)").find("a");
    if(!!$target){
        var data = $target.attr('custom-attr');
        confirm(data);

    }});

you could see the jsbin url below :

http://jsbin.com/nawaj/1/edit

Related to how to bind event on all rows of the table

Community
  • 1
  • 1
holmes2136
  • 477
  • 5
  • 14