I want to add the datepicker function and I need it in a separate file, but it seems not to work when I put it in external file even though I linked it, I don't want to put it in the same HTML file inside a tag. How should I call it
here is what I've done
The jquery file:
$(document).ready(function() {
$("#datepicker").datepicker();
}); //enter code here
The HTML File:
<link href="Styles/StyleSheet2.css" rel="stylesheet" type="text/css" />
<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/jquery/1.11.3/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="jquery/myJS.js" type="text/javascript"></script>
<body>
<label for="Date1"> Entry Date</label>
<input id="datepicker" />
</body>
Related
as i followed the official docs of flatpickr in this link for some reason the date picker didn't appear
here is what i did
i added this in my html head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
and this in my js file
import flatpickr from "flatpickr";
flatpickr("#myflatpickr", {});
in the html body where i have the input:
<input name="deadline" placeholder="Deadline" id="myflatpickr" required>
You can move it after the element is present in the DOM indeed as Paul T said. Or add a on document ready function to it. Couldn't reproduce the error message you've got.. Maybe just leave out the import/require part?:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body>
<div><input name="deadline" placeholder="Deadline" id="myflatpickr" required></div>
<script type="text/javascript">
flatpickr("#myflatpickr", {});
</script>
</body>
</html>
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 existing asp.net pages using bootstrap datepickers.
I need it now in a simple html page, so I copied the related link and script lines from the asp.net project into a bare minimum html file.
The datepicker never shows, and I have no idea what is wrong with it. I have looked aroud and searched the web for examples, but did not find out why it does not work.
Here's a little test file:
<html>
<head>
<title>datepicker test</title>
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datetimepicker({
format: "dd-MMM-yyyy"
});
})
</script>
</head>
<body>
<form>
<div class="input-append date" id="datepicker">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
</form>
</body>
</html>
Please advise,
TIA,
Guido
You misspelled the function to call the datepicker. It's
$("#datepicker").datepicker({
format: "dd-MMM-yyyy"
});
And you typed 'dateTIMEpicker'
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 using this plugin:
https://github.com/evoluteur/colorpicker
I am stuck on this step:
Now, let's attach it to an existing <input> tag:
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<input style="width:100px;" id="mycolor" />
I am putting the script in the head and obviously the input is in the body. I ensured that the file paths are right and I get no error. When I go into mycolor field the color box doesn't show. I am new to JS and a bit puzzled. Not sure how to get it to work. Any ideas on what I might be doing wrong?
If you keep reading the directions on that site, it says you must also place this:
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
After the <input>.
Basically, the absolute minimum is this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$("#mycolor").colorpicker();
});
</script>
<div style="width:128px;">
<input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
<div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>
Actually no, the absolute minimum is this:
<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
<link href="css/evol.colorpicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/evol.colorpicker.js" type="text/javascript"></script>
<input id="mycolor" value="#000000" />
<script>
$(document).ready(function(){
$('#mycolor').colorpicker()
});
</script>
The color picker puts the extra div tags in for you. The section of the directions that #DevlshOne is referring to shows another way to initiate the colour picker by manually adding the tags yourself, but they are not needed. The instructions aren't the clearest.
You only have to ensure the prerequisites are present: JQuery, JQuery-UI, Any JQuery-UI theme (it will still show without one, but will be transparent), evol.colorpicker.js (or evol.colorpicker.min.js), evol.colorpicker.css, and are loaded before you initiate the color picker.