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> <span class="btn btn-primary glyphicon glyphicon-pencil"></span> <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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…