简体   繁体   中英

Bootstrap Modal breaks with FullCalendar

Error I recieve:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'modal'

The minute I apply the links for the fullcalendar, modals break. Any reason for this? I also did verify modals only broke when the javascript/stylesheets were added [I tested the calendar without and modal ran]

<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>

If I define my calendar links before all my bootstrap it breaks the calendar saying it isn't supported as well.

So something with bootstrap and the fullcalendar either fights or overwrites each other.

My other local files

<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<script src="CSS/font-awesome-free-5.0.6/on-server/js/fontawesome-all.js"></script>  
<link href="CSS/bootstrap-theme.css" rel="stylesheet" />
        <link href="CSS/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="CSS/bootstrap.css" rel="stylesheet" />
        <link href="CSS/bootstrap.min.css" rel="stylesheet" />
        <link href="CSS/maxcdn.bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/ajax.jquery.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>

        <script src="Scripts/JavaScript.js"></script>
        <link href="CSS/Main.css" rel="stylesheet" />
        <script src="Scripts/Splitter.js"></script>

        <link href="CSS/Oxygen.css" rel="stylesheet" />
        <link href="CSS/passionOne.css" rel="stylesheet" />
        <link href="CSS/netdna_3.2.0_bootstrap.min.css" rel="stylesheet" />
        <link href="CSS/4.2.0_font-awesome.min.css" rel="stylesheet" />

I think i remember having this issue a long time ago. I actually went into my conflicting file and looked for similar words. I think I would try naming everything in full calendar that is named modal, to modaltwo. Just a find and replace on the entire file. See if that works for you.

So a warning to people like me who like to call modal.show() from vb.net code... the required lib jquery file can't be referenced with fullcalendar .

The bootstrap jquery files are all you need.

At this very moment I can't determine why the lib jquery file caused this bootstrap modal javascript break.

so I did the following links for fullcalendar [plus all my bootstrap files]:

<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script> <!-- need to calendar title -->
<%--<script src='lib/jquery.min.js'></script>--%>
<script src='fullcalendar.min.js'></script>

so that I could use a javascript function call to show a modal like so

<script type="text/javascript">

 function openmodal() {
     $('#myModal').modal('show');
 }

</script>

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM