I am getting this error that says jQuery is not defined. I want to use twitter bootstrap and jQuery-UI. In my <head> I've added the CSS and JS necessary. I noticed that the jQuery-UI page uses 1.9.1 jQuery and the latest version is 1.10.2. So I'm assuming there is some sort of conflict going on. Twitter bootstrap requires jQuery so that might be causing the error. Or perhaps I am doing something wrong.
Head:
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
Error:
Uncaught ReferenceError: jQuery is not defined bootstrap.min.js:6
(anonymous function) bootstrap.min.js:6
Load jQuery before everything else!
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This is most likely because of 2 reasons:
You are loading jQuery twice; remove one of them (preferably the older version).
You are loading bootstrap.min.js before loading jQuery (read the documentation here).
What you need to do is:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
add jquery js file above bootstrap
I've tested this and this order seems to work the best.
Load CSS
Load jQuery
Load Bootstrap
Load jQuery UI
Related
I am wondering how can i set up my current Theme that is designed using bootstrap and some css and js
I am using following css and js files in my theme and i don't want to put it in index.html like we did in angular 1 can any one tell me how to import all css and js effectively without compromising Angular 2 structure and behaviour.
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
<link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
<link href="theme/css/style.css" rel="stylesheet" type="text/css" />
Js files
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
<script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
<script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
I tried using ng2-bootstrap and bootstrap but can not get it working.
Your problem is your loading straight bootstrap along with jquery plugins instead of a something like angular-ui-bootstrap. Some boostrap stuff uses pure CSS(no compatibility issues) and others use jquery/ which can work iffy with Angular1/2 sometimes hence projects like angular-ui-bootstrap.
try the angular 2 version https://ng-bootstrap.github.io/
then load all the css files using webpack(just putting in the same css folder the current project css files are). Obviously you would need to change the existing bootstrap javascript code to angular-ui directives.
Hi I'm trying to use summernote but it won't fully load.
i have link all scripts and styles what it need.
<!-- Bootstrap3 core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- include libries(jQuery, bootstrap3, fontawesome) -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src='../js/jquery-1.11.1.min.js'></script>
<script src="../js/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="../css/summernote.css" />
<link href="../css/summernote-bs3.css" />
<script src="../js/summernote.min.js"></script>
<script src="../js/summernote.js"></script>
then i use JS of summernote
<script>
$( document ).ready(function() {
$('#summernote').summernote({height: 300});
});
</script>
and there is my html
<textarea id="summernote" cols="30" rows="10" class="form-control"></textarea>
and after that i get this
http://screenshot.cz/WO3ZQ/
i have no icons here. But everything works but it looks horrible.
I was trying to found solution and i found if I'm using bootstrap icons, i put them into and summernote use tag. Maybe it is the problem. I don't know.
updated your jsfiddle check it out now
http://jsfiddle.net/pW4d8/1/
$(document).ready(function() {
$('#summernote').summernote({height: 300});
});
works just fine..
The issue was with the js resources.
edit::
this in <head> works fine:
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>
<link href="/css/result-light.css" type="text/css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<script src="http://podivej.se/js/summernote.min.js" type="text/javascript"></script>
<link href="http://podivej.se/css/summernote.css" type="text/css" rel="stylesheet" />
<link href="http://podivej.se/css/summernote-bs3.css" type="text/css" rel="stylesheet">
To summarize because I've just encountered the same problem, summernote just need to load his .js file BEFORE his own .css!
I am pretty new to jQuery and I have never been using fancybox before. I tried to install it, but it doesn't work. I used several test scripts I found, but still nothing. Here is my code:
In head I have following (Paths to all files are correct):
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
And in my test document:
<script type='text/javascript'>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
});
</script>
<a id="single_image" title="" href=""><img src="http://localhost/images/something.png" alt="" /></a>
But when I click on the image, nothing happens.
You are declaring your jquery script last. That include should be first, preceeded by any other script that uses jquery. nothing to do if it's on localhost or not.
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have been having the same issue when your jquery-2.1.1.js. Once I used fancybox's provided jquery-1.10.1.js it worked however I got curious and tried jquery-1.9.1.js and my document stopped rendering the results.
I don't know if it helps or you figured it out already but I thought I would add what I found.
As the title of this post says, since I added the fancybox's sources to my file, other js functions doesn't work anymore. If i switch the position of js source files and put mine after fancybox's js source files, my js functions work but the fancybox no, in the other hand, the fancybox work but my js functions don't.
Here is the header of my file:
<head>
<link rel="shortcut icon" type="image/x-icon" href="imagens/its.png">
<link href="css/mystyle.css" rel="stylesheet" type="text/css"> <!-- MY CSS -->
<link href="http://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- FANCY BOX SOURCES -->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.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>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<!-- FANCY BOX SOURCES -->
<script src="js/myjs.js"></script> <!-- MY JS SOURCE FILE -->
I think that src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" is what's doing some conflict..
What can I do ?
You're importing a very old version of jQuery for your own code http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js, but then importing the latest version for Fancybox http://code.jquery.com/jquery-latest.min.js
Many things in the jQuery library have evolved since 1.3 was released almost 5 years ago, and several old APIs no longer work. The ideal thing to do would be to modernize your own code, and then just import jQuery once (a new or new-ish version).
Start by checking the error console to find out what's breaking.
For some strange reason i began to get this error TypeError: events.replace is not a function. I am using Jquery Webcam Plugin i was able to see the flash player camera moments ago until i did a recompile of the code and got this error. Under is my imported scripts:
Scripts
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="<%=request.getContextPath()%>/resources/js/jQuery-webcam/jquery.webcam.js"></script>
<script src="<%=request.getContextPath()%>/resources/js/citizen_registration.js"></script>
<link href="<c:url value="/resources/css/forms.css" />" rel="stylesheet" type="text/css" media="screen" />
<link href="<c:url value="/resources/css/citizen_registration.css" />" rel="stylesheet" type="text/css" media="screen" />
i updated the jquery plugin to <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>