Bootstrap Switch Toggle not working on Datatables second page

Question

I have list of data that contained in Datatables. The problem is, I have toggle that doens't work on second page and so on. I read somewhere and it says that is the problem with DOM and I tried to change my code, but still can't find any solution. This is my code:

<table class="table table-striped table-bordered" id="table-list-tour" style="width:990px !important">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Code</th>
                    <th>Tour Name</th>
                    <th>Recommended</th>
                    <th class="action">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($tours as $tour) : ?>
                <tr>
                    <td><img class="img-preview" src="<?php echo h(get_uri('upload/tour/' . $tour['image'])) ?>" alt="">  </td>
                    <td><?php echo h($tour['generic_id']) ?></td>
                    <td><?php echo h($tour['name']) ?></td>
                    <td style="text-align:center">
                        <input type="checkbox" class="toggle" <?php if ($tour['is_featured']) echo 'checked' ?> id="toggle<?php echo h($tour['id']) ?>" />
                        <script>
                          $(document).ready(function() {
                            $('#toggle<?php echo h($tour['id']) ?>').bootstrapSwitch({
                              onSwitchChange: function () {
                                var isChecked = $(this).is(":checked");

                                $.ajax({
                                  url         : '/admin/tour/toggleRecommendation',
                                  type        : 'post',
                                  data        : {'id':<?php echo h($tour['id']) ?>},
                                  success:function(data)
                                  {
                                    if (isChecked && data !== '') {
                                      $(this).attr('checked', false);
                                      alert(data);
                                    }
                                  },
                                  error:function()
                                  {
                                    alert('Toggle Failed !');
                                  }
                                });
                              }
                            });
                          });
                        </script>
                    </td>
                    <td class="action-group">
                        <a href="<?php echo h(get_uri('/admin/tour/update/?id=' . $tour['id'])) ?>" class="btn btn-primary tooltips" title="Edit"><i class="fa fa-pencil"></i><span>Edit</span></a>
                        <a href="<?php echo h(get_uri('/admin/tour/imageDetail/?tourId=' . $tour['id'])) ?>" class="btn btn-primary tooltips" title="Galeri Foto"><i class="fa fa-picture-o"></i><span>Image Gallery</span></a>
                        <a class="btn btn-danger tooltips" data-toggle="modal" data-target="#deleteModal<?php echo h($tour['id']) ?>"><i class="fa fa-trash"></i><span>Delete</span></a>

                        <div class="modal fade" id="deleteModal<?php echo h($tour['id']) ?>" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="vertical-alignment-helper">
                                <div class="modal-dialog vertical-align-center">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <p class="modal-title content-title" id="deleteLabel">Delete Item</p>
                                        </div>
                                        <div class="modal-body">
                                            <p>Are you sure want to delete this item?</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-danger" onclick="window.location.assign('<?php echo h(get_uri('/admin/tour/delete/?tourId=' . $tour['id'])) ?>')"><i class="fa fa-trash-o"></i>&nbsp;Delete</button>
                                        </div>
                                    /div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <?php endforeach ?>
            </tbody>
        </table>

So, I place the script on every item. And the jquery doesn't work, the toggle just appeared as a checkbox.

You're probably running into an issue when you're calling bootstrapSwitch on elements which aren't yet in the DOM, might be worth adding a data attribute to the cell and using that for the $tour['id'] and calling the function within the drawCallback - more details here: datatables.net/reference/option/drawCallback. If you'd like more help perhaps share the JS as well as the PHP and markup? — annoyingmouse
– annoyingmouse, Commented May 1, 2020 at 9:38
@tokmbo did you get solution? I have same problem and I don't get any solution yet. — Anthony Shoshi Gomes
– Anthony Shoshi Gomes, Commented Jun 21, 2020 at 8:28

Muhammad Asif · Accepted Answer · 2020-08-05 10:23:17Z

2

You have to Add following lines

// `enter code here`Call this function before datatable initililzation '
///////////////////Example///////////////////////////
  $(function () {
 $("input[data-bootstrap-switch]").each(function(){
      $(this).bootstrapSwitch('state', $(this).prop('checked'));
    });
///////////////////Before Below Datatable Initilization///////////////////////////

$("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
    });
    
    
      });

answered Aug 5, 2020 at 10:23

Muhammad Asif

5265 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap Switch Toggle not working on Datatables second page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related