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>
Related
I want to make a calendar view in javascript. I'm using this plugin, but the theme won't show, just trying to use standard theme. Does anyone know why?
https://fullcalendar.io/docs/theming
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
<script>
$(function() {
$('#calendar').fullCalendar({
themeSystem : "standard",
dayClick: function() {
alert('a day has been clicked!');
}
})
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
https://jsfiddle.net/03d1ahwy/
The problem is that
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css">
must be changed to
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.print.css" media="print">
(i.e. you must add the attribute media="print" to the link tag)
otherwise you'll always get the print layout, even on-screen. See here for more details about the "media" attribute.
Once you add that, it tells the print CSS to only take over when the user is trying to print the page, and lets the standard theme be used in the in-browser version.
Demo: https://jsfiddle.net/40f1z3ts/
P.S. If you just want to use the standard theme, you don't actually need to write themeSystem : "standard", in your code at all - this is the default value, so you can just omit it.
P.P.S. Of course if you want to use any other themes you have to set the theme system appropriately and include the relevant CSS files in your page.
looks like you are having problems with the libraries
download full calendar from here:
https://fullcalendar.io/download
make a folder and name it "lib" add fullcalendar.min.css, fullcalendar.print.min.css and moment.min.js inside it and use the next headers
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='lib/fullcalendar.min.css' rel='stylesheet' />
<link href='lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/fullcalendar.min.js'></script>
Edit:
for bootstrap 4 theme add:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
for jquery-ui theme add:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
I've built a web site using jQuery and Fancybox. It works fine on the web but I'd like to put it on a Hoo-Too Tripmate Titan to access it offline. The thing is it doesn't work although jQuery and Fancybox are included in the web site tree.
Here's the code of the the calls to the libraries.
<link rel="stylesheet" href="css/general.css">
<link rel="shortcut icon" href="images/icone_site.png">
<link rel="apple-touch-icon" href="images/icone_site.png">
<link rel="apple-touch-icon-precomposed" href="images/icone_site.png">
<link rel="icon" type="image/png" href="images/icone_site.png" />
<script src="jquery/jquery-2.1.3.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
Any idea ?
I added the advag module and it seems to be combining files, but noticed this:
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__sqX0oV0PzZnon4-v--YUWKBX0MY_EglamExp-1FI654__IOPiOtulrIZqqAM0BdQCjTz3N2n6srsVUk6UjqwYEZ0__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__1bGi9mT6hqx9o6nD5bJXmoSMpEPHhptLYP525xD_0e0__8xO7pFjt9gkiLqNXp1T5pf1qVx1B3E4JiRdo_bonpCk__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__WYBdBM69hbZ67HwkvEm3Klcgr0gEMg-hTDrv-ofiu_0__UJzap9vYL6P5WufuIpZ4HrhEDqpuUpzKBitKuUMmMwY__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__dC61ke986faoUib_CT99MB7tZjBA8yWX9ATTkjpTWyw__Vi6qRHAK9JP9CJy6hO-AskwMgX7bln4vsoJjDBzEOnE__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.css" media="all" />
<script type="text/javascript" src="/sites/default/files/advagg_js/js__OFsSsQzSaj6v-Oy0a_SsA80EpScOeUbJnZ4cKkiFU9o__uGtSosYSD4fR0mdlliQtbwJx0EbabeubaVWqq2KIlTA__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__ZnLWb-BTdQmjePHZT3a_HE5Vg9BrAL8v6h1eu0z7Eek__4LsSbjnjVeap6QGx4vvBE7-WJQUGh3gN1gnMb0Bjh48__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__bf0eTJ6iQnY3GsZO7jbyMczh0IjbGhGwoHB8QRMrO6M__JT_BtjvKQ3w-jLHLX6W2O9rJXNxR4c_rolkuXQfBusU__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__PdS3RA9MOoQrUBcBhAkRohLUbcIwqBt3WT-iQ0WBYYM__J5JCc-DaME9iOvxgHsman1xajK_HcsQnORtLYdyva5g__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
<script type="text/javascript" src="/sites/default/files/advagg_js/js__hrgDaYfGryCYs0RZQAb5BmgzuYw72p8FV3Uo4YGA-no__Osy32LqTRLSPiyOxYFNLa9K5k3YtrwL2yGKmO4sq_74__5y1bpT1aXe8cG3wqlISSnUVr8eB3ifViQaWktQUOMrU.js"></script>
Why is Drupal Advag creating multiple files and not just one? And how do I fix it?
Out of the box AdvAgg will mimic what core does; you need to configure it act how you want it to. On the admin/config/development/performance/advagg page uncheck "Use cores grouping logic". A really good guide on how to get your site to load faster is this issue for using AdvAgg on drupal.org: https://www.drupal.org/node/2493801
This is my application.html.erb. I think I have all the proper files but it is not recognizing ".wysihtml5" function.
<link rel="stylesheet" type="text/css" href="/css/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"></link>
<script src="javascripts/wysihtml5-0.3.0.min.js"></script>
<script src="javascripts/bootstrap.min.js"></script>
<script src="javascripts/bootstrap-wysihtml5.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
You don't add jquery on your script. Be sure jquery is added on your script other wise $ selector does't work.
I Have Problem With ext-3.3.1 Tree.
I use it in my project but sometimes the browser show this error and fail to load the page.
I take a picture of the errors and It's here and the html is here.
I really think it made by a bug ! anyone can help?
I hope you can help me it really made me mad.
Kind regards
The order of javascript file included in Head tag is important. the order should be like the following:
<script type="text/javascript" src="../../resources/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../resources/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/ext/resources/css/xtheme-gray.css" />
<link rel="stylesheet" href="../../resources/openlayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../../resources/app/theme/style.css" type="text/css" />
<script src="../../resources/openlayers/build/OpenLayers.js"></script>
<script src="../../resources/geoext/build/GeoExt.js"></script>