jquery - cannot show bootstrap modal in DataTable

Question

I am trying to show a bootstrap modal when I click on a div inside a dataTable, but I cannot figure out why it doesn't work.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" />
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.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="icon" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />

May be I have some error in the import. In the dataTable script, I have:

$(document).ready(function() {
    
    var table= $('#example').DataTable({
        "scrollY": "400px",
        "scrollCollapse": true,
        responsive: true,
        "autoWidth": false,
        dom: 'Bflrtip',
         "columnDefs": [ {
            "targets": 4,
            "data": null,
            "defaultContent": "<span class="btn btn-warning glyphicon glyphicon-eye-open"></span>&nbsp;<span class="btn btn-primary glyphicon glyphicon-pencil"></span>&nbsp;<div class="btn btn-danger glyphicon glyphicon-trash"></div>"
        } ]
    } );
    $('#example tbody').on( 'click', 'span', function () {
        var data = table.row( $(this).parents('tr') ).data();
        document.cookie = "id="+data[0];
        window.location.replace('fiche_student.php');
    } );
    $('#example tbody').on( 'click', 'div', function () {
        /*var data = table.row( $(this).parents('tr') ).data();
        var r =confirm( ' 312tes-vous s373r de vouloir supprimer le patient num351ro '+data[0],'Confirmer' );*/
          $('#myModal').modal("show");
    
    } );
    
} );

The declaration of the modal is in the end of my php code:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle"></h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">ok</div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>

If I show a simple alert, the code works fine. However, when I try to show the modal, it doesn't work.

Any suggestion to fix this problem ?

question from:https://stackoverflow.com/questions/65845537/cannot-show-bootstrap-modal-in-datatable

Answer 1

For those who could have the same problem, the solution was to change bootstrap version and downgrade it to 3.4.0, simple as that.