CODEWITHSUNDEEP
phpjquerymysqlsqlmodal-dialog
jerico
jerico

Reputation: 123

Jquery and Bootstrap 4 dataTable delete row on page 2 not working

Good day! I have a jquery and bootstrap 4 datatable with pagination and a delete button at each row but after the page 1 is full of data it will go to page 2. The problem is the data in page 2 with a delete button row is not working but in page 1 the delete button works perfectly..

Here's my table code:

<table class="table table-hover table-bordered" id="questionTable">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Student</th>
                                        <th>Subject Code</th>
                                        <th>Semester</th>
                                        <th>SchoolYear</th>
                                        <th>Professor</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php  while ($row = $result -> fetch_object()): ?>
                                    <tr>
                                        <td><?php echo  $row->Subject_Student_Taken;?></td>
                                        <td><?php echo $row-> Student_ID;?></td>
                                        <td><?php echo $row-> Subject_Code;?></td>
                                        <td><?php echo $row-> Term_Name;?></td>
                                        <td><?php echo $row-> SY_Name;?></td>
                                        <td><?php echo $row-> Faculty_ID;?></td>
                                        <td class="text-center">
                                            <a  class="btn btn-sm btn-outline-primary text-muted" href="SubjectTaken_edit.php?Subject_Student_Taken=<?php echo $row->Subject_Student_Taken;?>">Edit</a>

                                            <a  data-fid="<?php echo  $row->Subject_Student_Taken;?>" title="Delete Faculty" data-toggle="modal" data-target="#delete_modal"  class="btn btn-sm btn-outline-danger delete-faculty-btn text-muted" >Delete</a>
                                        </td>
                                    </tr>
                                    <?php endwhile; ?>

                                </tbody>
                            </table>

Here's my delete code:

if(!empty($_POST['delete'])) { 
            $id = $_POST['delete']; 
            $data->delete_StudentTakenHandle($id, $conn); 

         }

Function code:

 function delete_StudentTakenHandle($id, $conn){
        $sql = "DELETE FROM subject_taken_handle WHERE Subject_Student_Taken=? ";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("i", $id);
        $stmt->execute();    
    }

Modal code:

<div class="modal fade" id="delete_modal" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <!-- Modal Header -->
                          <div class="modal-header">
                            <h4 class="modal-title">Delete Confirmaiton</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- Modal body -->
                          <div class="modal-body">
                            <div class="alert alert-danger" role="alert">
                              Are you sure you want to delete selected record?
                            </div>
                          </div>
                          <!-- Modal footer -->
                         <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                        <input type="hidden" name="delete"  id="row-id-to-delete">
                        <button type="submit" class="btn btn-danger" >Yes</button>
                      </div>
                        </div>
                      </div>
                    </div>

And here's my jquery code:

<script>

        $('.delete-faculty-btn').on('click',function(){
         $("#row-id-to-delete").val($(this).data('fid'));

    });



</script>

Upvotes: 0

Views: 534

Answers (2)

jerico
jerico

Reputation: 123

Use the delegated format of on instead of click..on() | jQuery API Documentation

$('.delete-faculty-btn').on('click',function(){
     $("#row-id-to-delete").val($(this).data('fid'));

});

becomes:

$(document).on("click", ".delete-faculty-btn", function () {
    $("#row-id-to-delete").val($(this).data('fid'));

        });

Upvotes: 0

Milan
Milan

Reputation: 340

The error is, most likely, caused by this:

only the elements from the first page are displayed (existing) when you set your jQuery event.
Since the jQuery.on function attaches events only to existing elements, the event is not attached to elements from other pages.

Solution:

You should use the table's click event as a wrapper for attaching events to delete buttons.

This way, each time you click and change the page, delete buttons will exist, and the jQuery.on function will be able to attach event for delete to them.

You should wrap your event attach code like this: 

$("#questionTable").on("click", ".delete-faculty-button", function(){
   // attach your delete event here
});

Read more in the documentation of jQuery.on.

Upvotes: 1

Related Questions