I'm trying to get a localized implementation of a date picker to work, for a while now. I first attempted doing at the application I am working on, to no avail. So I decided to create a small html page and use it on my local httpd to try and get it running and get transfer the working code to my app.
I copied all the CSS and JS files, adjusted the path and tried the implementation. The file is the following:
As you can see, it's very simple. All I want to do here is learn how to use the bootstrap-datetimepicker, so I can manipulate data for my main application.
Problem is: if I use jquery-ui's notation $('#datepicker0').datepicker(); it works. But if I try to use $('#datepicker0').datetimepicker(); from https://github.com/Eonasdan/bootstrap-datetimepicker it doesn't.
I'm pretty sure it's a very basic mistake, but I'm looking at this piece of code for a while now and can't fathom what it is...
Can someone lend me a help here?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/beyond.min.css" />
<link rel="stylesheet" href="css/demo.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/moment/moment.js"></script>
<script type="text/javascript" src="js/moment/moment-with-locales.js"></script>
<script type="text/javascript" src="js/moment/pt-br.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker0').datepicker();
});
</script>
<div class="container">
<div class="row">
<div class="input-group date col-sm-3">
<input id="datepicker0" type="text" name="executionDate" class="form-control"></input>
</div>
</div>
</div>
</body>
</html>
I got it working. Solution was as simple as use the right file. How so? I was trying to download the libraries files by right clicking on it and saving it to my computer. What I got instead of the file was the html for the page. I discovered my stupidity quite by accident this morning and got the correct files, by download the zip for the library and, like in a magic trick, it started working... Thanks for your insights and hel
Related
Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.
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
New to jQuery. I cannot get the datepicker to work. Can anyone tell my what I am doing wrong? Thank you, any help is appreciated. Here is the skeleton code:
<html>
<head>
<title>Example</title>
<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>
<script>
$(function() {
$("#quoteDate").datepicker();
});
</script>
</head>
<body>
<input type="text" id="quoteDate">
</body>
</html>
I have looked at many posts almost identical to this one, but none of the answers worked. I have also downloaded the jQuery UI files to reference them locally, but that wouldn't work either.
They aren't working for you locally because you are running them from a file with a url like file:///Macintosh HD/whatever....
You need to change the lines:
<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>
to:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
When you use a // prefix for an asset, it matches whatever protocol you are using. So when you load up something locally (without using a local web server), it looks for file:///code.jquery.com/jquery-1.10.2.js which doesn't exist. Changes the assets to start with http:// or https:// instead of //.
After reading the above answers and your comments, it seems that you are unable to run it locally on your browser.
Referencing Files Locally
Easiest way is to download and keep all the files in same directory.
Let's say the files are
index.htm, jquery-ui.css, jquery-1.10.2.js, jquery-ui.js
File : index.htm
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function() {
$("#quoteDate").datepicker();
});
</script>
</head>
<body>
<input type="text" id="quoteDate">
</body>
</html>
Relative Path
You can give relative path such as
src="js/jquery-1.10.2.js"
src="js/jquery-ui.js"
href="css/jquery-ui.css"
if the directory structure is :
Present Working Directory
index.htm
js (directory)
jquery-1.10.2.js
jquery-ui.js
css (directory)
jquery-ui.css
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">
Could anyone tell me how to get this code working on a web server. It works fine locally but the calculations don't work online. What has gone wrong? The html file is in the same folder as the jquery.js file.
http://jsfiddle.net/nyree/3CgcH/
thanks in advance for any help
<script type="text/javascript" src="/spreadsheets/jquery.js"></script>
<script type="text/javascript" src="YUI/yahoo-min.js"></script>
<script type="text/javascript" src="YUI/yahoo-dom-event.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/fonts-min.css" />
<script type="text/javascript" src="YUI/cookie-beta-min.js"></script>
<script type="text/javascript" src="YUI/cookie-min.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/tabview.css" />
<script type="text/javascript" src="YUI/element-beta-min.js"></script>
<script type="text/javascript" src="YUI/tabview-min.js"></script>
<link rel="stylesheet" type="text/css" href="YUI/container.css" />
<script type="text/javascript" src="YUI/container-min.js"></script>
None of these files exist on jsFiddle's server. You need to change your reference URLs.
What exists on your server has nothing to do with what exists on jsFiddle's server.
jsFiddle only knows a part of the path, /spreadsheets/jquery.js. That is a relative URL to their server. If you want your code to work on someone elses server, you either need to be able to put the files on their server to maintain the path structure, or change the URLs to be absolute.
<script type="text/javascript" src="http://YOURWEBSITE.com/spreadsheets/jquery.js"></script>