0

I have been using jquery and bootstrap datatable and it was working fine until when the next page was needed when the data in the table is greater than 5, it stopped working.

Working process: Please refer to the screenshot attached. The blue link on the left with the number pops up a modal which displays the rest to the data. The modal is working on the first 5 records but when I navigate on the next page or show data more than 5, the script breaks for some reason the modal or the edit or the delete click events do not work.

CDN Links Used:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

Code for the Table

<table id="table_details" class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Policy Number</th>
<th scope="col">Registration</th>
<th scope="col">Insured Name</th>
<th scope="col">Contact</th>
<th scope="col">Case Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="table_data">
<?php
for ($i = 1; $i <= $rowcount; $i++) {
$ticketdata = mysqli_fetch_array($ticketresults); ?>
<tr>
<input type="hidden" id="dataid" name="dataid" value="<?php echo $ticketdata['id'] ?>">
<th scope="row">
<a href="#" id="<?php echo $ticketdata['ticketnumber']; ?>" class="view_data" data-toggle="tooltip" data-placement="left" title="View Details" /><?php echo $ticketdata['ticketnumber']; ?> </a>
</th>
<td><?php echo $ticketdata['policynumber'] ?></td>
<td><?php echo $ticketdata['registration_number'] ?></td>
<td><?php echo $ticketdata['insuredname'] ?></td>
<td><?php echo $ticketdata['contactnumber'] ?></td>
<td><?php echo $ticketdata['casestatus'] ?></td>
<td>
<button type="button" class="editticket" id="<?php echo $ticketdata['id'] ?>" data-toggle="tooltip" data-placement="left" title="Edit Details"><i class="fa fa-pencil"></i></button>
<button class='deletedata' id='<?php echo $ticketdata['ticketnumber'] ?>' data-toggle="tooltip" data-placement="right" title="Delete Record" /><i class="fa fa-trash-o"></i></button>
</td>
</tr>
<?php } ?>
</tbody>
</table>

jQuery Code to view Modal

$('.view_data').click(function() {
var ticket_id = $(this).attr("id");
$.ajax({
url: "./posters/viewdata.php",
method: "POST",
data: { ticket_id: ticket_id },
success: function(data) {
$('#ticketsummary').html(data);
$('#dataModal').modal("show");
}
});
});

Screenshot of the Table Click in this highlighted URL does not work

Nilanjan Roy
  • 31
  • 8
  • Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) BTW the CDN s you use do not help in the slightest, post your own code, the setup of your datatable, the event that opens the modal etc – Lapskaus Jul 14 '20 at 09:36
  • I have edited the post with the required details. Please tell me if I need to share more details. – Nilanjan Roy Jul 14 '20 at 10:53
  • Your `.view_data` elements are dynamic elements, that get created when you click on the next page of your datatable. Follow the link in my first comment to fix that. – Lapskaus Jul 14 '20 at 10:56
  • I used ```$(document).on( 'click', '.click-activity', function () { ... });``` That really worked. Thanks a lot – Nilanjan Roy Jul 14 '20 at 11:25

0 Answers0