Bootstrap - $(...).modal不是一个函数/解决方案:DataTables冲突(jquery的多个包含)

5jvtdoz2  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(3)|浏览(131)

当我尝试从自定义JavaScript文件调用与bootstrap modals相关的东西时,我得到以下错误:CLICK HERE FOR IMAGE
我的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">&times;</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";
?>

我的footer.php,其中包含jquery:

<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>

当我在postavki.js中运行以下代码时,我得到错误:

$(document).ready(function() {
    $('#dodajVraboten').modal('show');
});

正如你所看到的,我首先加载jquery,然后引导,然后是我的自定义js文件(postavki.js),在那里我得到了那个错误。我也读到过,如果我多次加载jquery,我会得到这个错误,但这不是问题,因为我只在header.php中加载它

如果您无法打开镜像,这里是错误:

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)

先谢谢你了。

编辑(如果header.php有任何不同):

<!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>
t40tm48m

t40tm48m1#

这通常是因为您的脚本以错误的顺序加载而导致的。请确保您没有一个脚本以上的一个,它需要。
例如,bootstrap依赖于jQuery,因此必须首先引用jQuery(正如您所做的那样)。
另一件可能发生的事情是两次引用jQuery,检查你的脚本没有引用jQuery本身。如果我没记错的话,datatables.js实际上包含了对jQuery的引用。

aurhwmvo

aurhwmvo2#

我使用Jquery V3.3.1 Bootstrat V4.1.0 Momment.js V2.18.0和Fullcalendar 3.9.0,
EventClick工作得很好,但您必须按以下方式定义它

$(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'
            }
        });
    });
bd1hkmkf

bd1hkmkf3#

对我来说,我必须像这样声明模态;

myModal = new bootstrap.Modal(document.getElementById('myID'));

然后调用失败的$('#myID').modal('show'),抛出错误“$(...).modal不是一个函数”,我这样调用它myModal.show();,它工作了!

相关问题