JQuery DatePicker not working after first instance - javascript

I couldn't find anything that seemed to answer why my DatePicker would not work more than once on the same page. Below is the code I'm using, with most of the body content removed for clarity's sake and ease of reading:
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<!-- Load jQuery UI CSS -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- Load jQuery JS -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI Main JS -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Load SCRIPT.JS which will create datepicker for input field -->
<script src="script.js"></script>
<link rel="stylesheet" href="runnable.css" />
</head>
<body>
<p>Pick a Date: <input type="text" id="datepicker" /></p>
<p>Pick a Date: <input type="text" id="datepicker" /></p>
<p>Date:<input type="text" id="datepicker" /></p>
</body>
Can anyone tell me why it's only working for the first instance but not the following 2?
Thanks!

You have multiple instances with an id of datepicker, and this is invalid HTML. id should be a unique field.
If you want to apply to multiple ones, make it a class:
<input type="text" class="datepicker" />
and then apply it using the class selector:
$('.datepicker').datepicker();
This will solve both the invalid HTML and multiple instances problems.
As a little extra information, the reason it works for only the first instance is because the ID selector in jQuery stops looking in the DOM for elements after it finds the first (and what should be only) match.

Related

Adding two functions in one input tag

I am trying to add two two functions in one input tag. BUT failed many times.
What i am trying to do ?
There are two functions in different input tags in my HTML template.
One for add tag by , .
AND second for autocomplete.
I am trying to add autocomplete and tags input in the same textinput, So i can use autocomplete and add tag at same time.
home.html
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="{{ STATIC_URL }}user_tags/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
#This function is for `autocomplete`.
<form>
<label for="product">Product</label>
<input type="text" name="product" id="product">
</form>
</form>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
#This function is for `add tag`
<b>Add Tags </b>
<input type="text" data-role="tagsinput" class="form-control" name="tags">
<br>
What have i tried ?
I see an answer that if i add semicolons at the end of the both tag then it will work BUT it didn't work for me.
<form>
<label for="product">Product</label>
<input type="text" name="product" id="product"; data-role="tagsinput";>
</form>
I don't know what to do.
Any help would be Appreciated.
I'm confused what you are asking. If you are trying to mark an element (input) to be selected by different queries, you can use classes. If you are trying to run 2 functions with one function call, wrap the two functions in a single function.

ASP web application issues with jquery datetime picker

I am attempting to place the bootstrap-datetimepicker by eonasdan in a C# gridview cell. I am facing issues with the elements not appearing correctly. Only the time is showing up and not the calendar. There are places for direction arrows on the element but they are not showing up either which makes me think it is a css issue and not a jquery or html issues. Any guidance would be greatly appreciated. Thanks!
I have tried rearranging and trying different .js and .min.js references. I have tried several of the different html layouts as provided on the documentation.
<script src=".../jquery-1.10.2.js"></script>
<script src=".../moment.js"></script>
<script src=".../bootstrap.js"></script>
<script src=".../bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href=".../bootstrap.css" />
<link rel="stylesheet" href=".../bootstrap-datetimepicker.css" />
…
<div class="containter">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" class="form-control" id="dt1" />
</div>
<script>
$(function () {
$('#dt1').datetimepicker();
});
</script>
</div>
</div>
</div>
There popup does work and it shows the time element, but the arrows to make the time go up and down are not appearing and the actual calendar itself is not showing up.
EDIT: I am now able to use the plugin with all of the textboxes but things are still not appearing as they should be. Here is the updated code. The datetime picker is still not appearing completely though.
<script src=".../jquery-3.4.1.min.js"></script>
<script src=".../moment.js"></script>
<script src=".../bootstrap.js"></script>
<script src=".../bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href=".../bootstrap.css" />
<link rel="stylesheet" href=".../bootstrap-datetimepicker.css" />
…
<div class="containter">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<asp:TextBox runat="server" ID="dt1" cssclass="form-control"></asp:TextBox>
</div>
<script>
$(function () {
$('.form-control').datetimepicker();
});
</script>
</div>
</div>
</div>

Laravel 5.2 datepicker

For days, I'm trying to get Datepicker functionality in my web application (based on Laravel 5.2). Can't get it to work.
In the head section of my layout file I add:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css">
and at the bottom I have
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(function() {
$('.datepicker').datepicker();
});
</script>
In the view file I have
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
I'm seeing the date field but when I click on it, it simply tries to open the dateselector, but it appears empty (so no dates inside)
Suggestions welcome!
Note: screenshot here
As said above, it looks like you need to add bootstrap CSS to your app.
If you intend to use datepicker (or any other bootstrap elements) in more than 1 view then I would add it to your layout view, it will make life a lot easier than adding it to each file.
If you have added the files locally to your project to public/assets/css then call them with the below.
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap.min.css')}}"/>
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-responsive.min.css')}}"/>
OR
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
You might need to add bootstrap.css as well. The styling of the elements in the calendar takes from that stylesheet.
Include bootstrap styles and javascript files. they are required to use bootstrap-datepicker.

How do I make JQuery Color Box show?

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.

Script tag attributes - javascript

I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/html" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.
I am probably missing something very basic...
You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/x-handlebars-template" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
And then in your javascript somescript.js you need to get the contents of that script tag using something like this
var uncompiledTemplate = document.getElementById('template1').innerHtml;
// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);
And then you can work with your template!
The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.

Categories