Uncaught TypeError: Cannot read property 'modal' of undefined

elicatch

Hi, I have some trouble using Responsive extension for DataTables with Bootstrap styling, I am getting this error log on console:

Uncaught TypeError: Cannot read property 'modal' of undefined
(anonymous function) @ responsive.bootstrap.js:40
(anonymous function) @ responsive.bootstrap.js:32
(anonymous function) @ responsive.bootstrap.js:34

This is my code:

$("#clientsTable").DataTable({
    responsive: true,
    "aoColumnDefs": [
        {
            "bSortable": false,
            "aTargets": [10]
        }
    ],
    info: false,
    lengthChange: true,
    ordering: true,
    paging: true,
    searching: true
});

And this is my scripts order:

<!-- jQuery 2.2.3 -->
<script src="{{asset('plugins/jQuery/jquery-2.2.3.min.js')}}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{{asset('bootstrap/js/bootstrap.min.js')}}"></script>
<!-- DataTables plugin -->
<script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatables/dataTables.bootstrap.min.js')}}"></script>
<!-- DataTables Responsive Extension -->
<script src="{{asset('plugins/datatables/extensions/Responsive/js/dataTables.responsive.js')}}"></script>
<script src="{{asset('plugins/datatables/extensions/Responsive/js/responsive.bootstrap.js')}}"></script>

Any ideas on what's going on here? Thanks!

allan

Might you be including jQuery multiple times on the page? Or possibly your Bootstrap JS file doesn't include the Bootstrap modal library? I'd need a test case, per the forum rules, to be able say for sure what the issue is.

Allan