Bootstrap - $(…).modal is not a function / Solution: DataTables conflict (multiple includes of jquery)
Question
I get the following error when i try to call something related to bootstrap modals from custom javascript file: CLICK HERE FOR IMAGE
My index.php:
<?php
require "includes/header.php";
require "includes/navigacija.php";
?>
<div class="modal fade" tabindex="-1" role="dialog" id="dodajVraboten">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><span class="glyphicon glyphicon-plus-sign"></span> Додај вработен</h4>
</div>
<!-- MODAL CONTENT -->
</div>
</div>
</div>
<?php
require "includes/footer.php";
?>
My footer.php where jquery is included:
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/skripti.js"></script>
<script type="text/javascript" src="js/postavki.js"></script>
</body>
</html>
I get the error when i run this code in postavki.js:
$(document).ready(function() {
$('#dodajVraboten').modal('show');
});
As you can see i load first jquery then bootstrap then my custom js file (postavki.js) where i'm getting that error. Also i have read that if i'm loading jquery multiple times i can get this error, but that's not the issue because i'm loading it only in header.php
If you can't open the image here is the error:
postavki.js:18 Uncaught TypeError: $(...).modal is not a function
at HTMLDocument.<anonymous> (postavki.js:18)
at fire (datatables.js:3199)
at Object.fireWith [as resolveWith] (datatables.js:3329)
at Function.ready (datatables.js:3548)
at HTMLDocument.completed (datatables.js:3564)
Thank you in advance.
EDIT (IF header.php is making any difference):
<!DOCTYPE html>
<html lang="mk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>asd</title>
<link rel="icon" href="sliki/favicon.ico" type="image/x-icon"/>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/stil.css" rel="stylesheet" type="text/css">
</head>
<body>
2 answers
solution1
3 ACCPTED 2017-08-05 22:00:40
This is usually caused because your scripts are loaded in the wrong order. Make sure that you don't have a script above one that it requires.
For example, bootstrap depends on jQuery so jQuery must be referenced first (as you have done).
Another thing that can happen is two references to jQuery, check none of your scripts reference jQuery themselves. If memory serves me correctly, datatables.js actually includes a reference to jQuery.
solution2
0 2019-03-29 10:44:36
I using Jquery V3.3.1 Bootstrat V4.1.0 Momment.js V2.18.0 and Fullcalendar 3.9.0 ,
EventClick works well but you have to define it in the following way
$(document).ready(function () {
$("#calendar").fullCalendar({
lang: 'es',
events: '/Citas/Eventos',
eventColor: '#378006',
**eventClick: function (event, element) {
var url = '@Url.Action("Edit", "Citas")' + "/" + event.id;
$('.modal-body').load(url, function () {
jQuery.noConflict();
$('#ModalAccion').modal('show');
});**
},
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'Hoy',
month: 'Mes',
week: 'Semana',
day: 'Dia'
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.