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>
Related
I have a jsp and when it loads it's throwing $(...).idleTimeout is not a function in the console and for this rest of the scripts are not working in that jsp. I have included the jquery and scripts in my jsp as below :
I have tried to include different versions of jquery , but that didn't work either.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="/NBO/assets/js/manageRoles.js${asset_id}"></script>
<script type="text/javascript" src="/NBO/assets/js/manageGuestUserMain.js${asset_id}"></script>
<link href="/NBO/assets/css/updateCredentials.css${asset_id}" rel="stylesheet" type="text/css" />
<link href="/NBO/assets/css/manageRoles.css${asset_id}" rel="stylesheet" type="text/css" />
I have found the reason for the error. It's because the JSP was importing the jquery through , and the JSP was defined the in spring tiles view name and the tiles was extending a default definition which had some jquery already. Since there were multiple jquery import , it was failing. I simply commented the jquery import in my JSP i.e. and it worked smooth.
I am trying the jquery alert example on this webpage: http://www.tutorialscollection.com/jquery-demo/jquery-demo.php?ex=8.0_1. I'm new to using jquery and I can't figure out how to get the dependencies listed in the head section:
<head>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
Here is the full file, but probably not needed:
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Example script -->
<script type="text/javascript">
$(document).ready( function() {
$("#basic_button").click( function() {
jAlert('Example of a basic alert box in jquery', 'jquery basic alert box');
});
});
</script>
</head>
<body>
<p>
<input id="basic_button" type="button" value="Show Basic Alert" />
</p>
</body>
</html>
Google hosts a CDN. To make sure JQuery's libary is loaded add this into the <head> tags
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you are trying this on a local machine then you can download jquery here and set it up in the <head> as this:
<script src="path_to_jquery" ></script>
I found the dependencies here:
http://www.tutorialscollection.com/jquery-demo.
This serves my purposes much better than the tutorial in this question: How to generate a simple popup using jQuery
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"/>
I must be missing something really simple but I can't for the life of me figure out what.
Basically on the page I'm working on I've 6 divs with the same class and I need them to be resizable. I couldn't get it to work so I created a simple test page just to see if it would work there with the syntax I'm using.
I've tried to use it inside and outside the document.ready function and none of it worked.
Here's the code for what is loading and the script:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/oam-white.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/jquery-ui-1.12.0.custom/jquery-ui-1.12.0.custom/jquery-ui.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/oam.js"></script>
<script>
$(document).ready(function() {
});
$(function() {
$('#test').resizable({
animate: true
});
});
</script>
Here's a codepen
Thank you in advance for the help. Rod
This question is already asked many times but none of them worked for me. I am trying to use this date picker in a JSP file. This is my script
<head>
<title>My Home</title>
<link rel="stylesheet" type="text/css"
href="../resource/css/page-style.css" />
<link rel="stylesheet" type="text/css"
href="../resource/css/jQuery-ui.css" />
<script src="../resource/js/jquery-1.9.1.js"></script>
<script src="../resource/js/jquery-ui.js"></script>
<script type="text/javascript" src="../resource/js/form-elements.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#shortcuts").load("shortcut.html");
$("#datepicker").datepicker();
alert('jQuery is working');
});
</script>
</head>
The shortcut file is loading perfectly, alert is also showing. I get error message as TypeError: $(...).datepicker is not a function. I am not facing this problem if I run this script in a html file placed in my desktop, when I copy the come code to my IDE and run it I get this error in my console. Please suggest me what can I do? I know this question is asked several times I have checked every answer this is the only link having close match to my prob but didn't work for me.
The problem is with your imported files.I think you have not placed them properly.
Try to import these files
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
It is working for me.
see here for more information
Double check that there are no JQuery references after your JQuery-ui reference.
I had an extra JQuery reference that came after my JQuery-ui reference and lost an hour chasing the problem. That will cause the datepicker not found error.
This is something to do with the import files. I also faced the same scenario and following imports helped me to overcome the following issue "datepicker is not a function".
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">