I have trouble including Jquery in my HTML page. I'm trying to display a calendar clicking on a button, but the calendar is not showing up. The following error showed up : $(..)Datapicker is not a function. I've looked up on internet, and people said it was because of multiple including. But I'm pretty sure that I've only included Jquery once, because when I remove the Jquery include, it says that I do not include it. Here is the header:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
<script src="https://use.fontawesome.com/6cd7c64e2b.js"></script>
<link rel="stylesheet" type="text/css" href="/static/app/css/control/style.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/control/ir-button.css" />
<link rel="stylesheet" type="text/css" href="/static/app/css/recorder/style.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="/static/app/js/recorder/timer.js"></script>
Note that the js script is in the header because I wanted to test it as it was not working in an external file!
Thanks in advance!
You need to include jQuery (core) too. Actually you only added jQuery UI, witch is an extension for jQuery itself.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
And are you sure using such an old version of jQuery UI? Current version of jQuery UI is 1.12.0, working with all jQuery versions since 1.7.
Try to fix it by following order and version of jquery files. Check below code snippet.
$( function() {
$( "#datepicker" ).datepicker();
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type=text id="datepicker"/>
Related
I tried to research this subject but everything I found referred to the common error of not including the jquery-ui file into the header. I however do have jquery first and then jquery-ui. I host the files locally but I have also tried to copy the most updated cdn links from the official sites to be sure of not having made whatever weird typing error or host an outdated file.
It still doesn't work, I always get "Uncaught TypeError: $(...).autoComplete is not a function"
Do you have any idea what could be wrong apart from the missing jquery-ui file?
My header looks like this:
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/dataTables.tableTools.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="icon" href="images/favicon.ico">
The Jquery code part of the autocomplete looks as follows:
$(document).ready(function() {
$(function () {
$(".auto").autoComplete({
source: "soplogsave.php",
minLength: 3
});
});
and html:
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
I can post the php code aswell but I'm not sure it's relevant, as I have already tried using preconfigured variables in jquery and it still didn't work, i still got the "autocomplete is not a function" error.
I think, you have to write autocomplete not autoComplete.
$( "#tags" ).autocomplete({
source: availableTags
});
I'm using JQuery Mobile with it's mobile themed datepicker plugin. Here is the relevant code, as per JQuery Mobile Datepicker demo, that works just as expected:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="jquery.mobile.datepicker.css"/>
<script src="jquery-1.11.3.min.js"></script>
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script src="jquery.mobile-1.4.5.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="jquery.mobile.datepicker.js"></script>
</head>
<body>
<input id="servicedate" name="servicedate" data-role="date" type="text" />
</body>
Above produces properly styled mobile datepicker tied to "servicedate" input like this.
Now, any attempt to interact with datepicker, like dynamically changing any of the options, causes it to lose its mobile style. To the bottom of body, I add a:
<script>
$("#servicedate").datepicker({ dateFormat: "DD, MM dd yy", });
</script>
... and it now, while option does work, produces rather unpleasant looking, un-themed datepicker like this.
Any help/guidance with what I am doing wrong would be appreciated. Thanks.
You need to add a reference to jqueryUI.css to your header
Something like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
I would prefer to not have to do this but its the only way I got it to work.
(edited)
Here's my code;
<head>
<title>page title</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
</head>
<body>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3>-shift title-</h3>
<div><p>-shift content here-</p></div>
<h3>-shift title-</h3>
<div><p>-shift content here-</p></div>
</div>
I'm sure i've missed something but my thinking is i've used a CDN and put the function in, the divs are not collapsing?
Problem was not including <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
I think you are using jQuery UI so you'll need to include that library below jQuery
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
I'm not totally sure, but I think you may be missing some css files.
Use this as scripts, let's see if it's working:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
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!
Consider the following html head javacsript and css referecnes:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
The above datepicker does not work, but this does:
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="/css/jquery-ui.css" type="text/css">
<script type="text/javascript" src="/js/fadeslideshow.js"></script>
<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script>
$(function(){
$('#datepicker').datepicker({dateFormat:'DD dd/mm/yy',showAnim: 'slide'});
$("#anim").change(function(){
$("#datepicker").datepicker("option","showAnim",$(this).val());
});
});
</script>
So if I place the referencve 'fadeslideshow.js' above the the reference to the main jquery library and ui file. Similarliy if I comment out the fadeslideshow.js reference the datepicker will work.
Why would this be the case, it took me over an hour to figure out why the datepciekr was not working?
Thanks,
Alan.
Because browsers evaluate Javascript files as soon as they are loaded. fadeslideshow.js depends on either jQuery or jQuery UI. it will try to reference a non-existant object, which, depending of the functionality of the script, may set a variable to a state not compatible to jQuery UI's datepicker.
Fixed by adding a reference to an old version of jquery which fadeslideshow.js must obviously depend on:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>