JQuery UI datepicker triggered from text link - javascript

I'm trying to setup my css menu so that one of the text links triggers a datepicker calandar to open. I have stripped everything down to the code below. The problem I am experiencing is that the code below does not work but when I remove the ul, li tags it starts working.
I am using 1.8.0 JQuery and 1.8.23 JQuery UI.
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
alert(dateText);
},
});
$("#datep").click(function() {
$("#dp").datepicker("show");
});
});
</script>
</head>
<body>
<ul>
<li>Test<input type="hidden" id="dp" /></li>
</ul>
</body>
</html>
Some weird things I have noticed. If I move the input under the ul it works kind of but will get an error after a few clicks on and off but if I add empty div under that input then it will start working normally it seems.
Any help is greatly appreciated.

So this is a bug. You'll have to add a block-level element right after the hidden input:
HTML:
<ul>
<li>Test
<input type="hidden" id="dp" />
<div></div>
</li>
</ul>​
Example: http://jsfiddle.net/andrewwhitaker/LE2CG/1/

Another version with hidden text: http://jsfiddle.net/sKXJt/ Working Demo http://jsfiddle.net/BhqmY/
This will help for hidden textbox:
http://forum.jquery.com/topic/attaching-datepicker-to-an-icon-for-a-hidden-input-field
Open JQuery Datepicker by clicking on an image w/ no input field
Hope it will help the cause :) I am not sure about the downvote :) anyhoo see the version with the hidden text here: http://jsfiddle.net/sKXJt/
Code
$(document).ready(function() {
$("#dp").datepicker({
onSelect: function(dateText, inst) {
alert(dateText);
},
});
$('#datep').click(function() {
$('#dp').datepicker('show');
});
});​
working image

Since I'm using this throughout my project, I created a compact jQuery plug-in to do this, and decided to share.
JSFiddle: https://jsfiddle.net/yahermann/xyjhyqma/
HTML:
<span class="some-datepicker-class">
(some initial date)
</span>
JAVASCRIPT:
$('span.some-datepicker-class').datepicker_link(); // see jsfiddle for options
The default onSelect handler takes an optional link & date parameter set in the initial HTML. If both are provided, then upon selecting a new date, the plugin will load the provided link and include the selected date as a value to the provided parameter. Example:
2018-05-05
The initial date 2018-05-05 will be displayed. Upon selecting a new date, the plugin will load the following page: http://example.com?mydate=(new_date)
If this functionality is not desired, just set href="#" and/or provide your own onSelect callback instead.

Related

WordPress color picker not working on clone jQuery

I want to add a color picker on WordPress. I tried by cloning the <div> and append it, but clone color picker isn't opening.
Here is what I tried:
jQuery(function($) {
$('.select-color').wpColorPicker();
$('.more-select').click(function(e) {
e.preventDefault();
var name = $('.number-container:last').clone();
name.find('.ppom-img-uploader-area').end().appendTo('.ppom-img-uploader-area');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div class="number-container">
<label>name</label>
<input type="text" name="">
<label>color</label>
<input type="text" name="color-name" class="select-color">
</div>
<button class="more-select">more</button>
</div>
Here is also a JSFiddle (as suggested in the comments below). How can I solve this problem?
Thanks in advance.
The color picker is initialized by using this after the DOM is ready: $('.select-color').wpColorPicker();
Any element that did not exist when the DOM was first loaded, will not be affected by any JS that was run at the beginning. After cloning it, you need to initialize the new one.
$('.more-select').click (function (e) {
e.preventDefault();
var name = $('.number-container:last').clone () ;
name.find('.ppom-img-uploader-area').end().appendTo('.ppom-img-uploader-area');
$('.select-color').wpColorPicker();
});
I can't test this for you because the color picker does not work in your snippet (you did not provide the JS for the wpColorPicker() function). I believe it will work in WordPress tho.

How to integrate the Bootstrap datepicker

I am currently trying to integrate the bootstrap datepicker, but for some reason it is not working at all. The datepicker is simply not showing like it should.
I have created a jsfiddle here: http://jsfiddle.net/4hmuff8x/
It contains the js code of both the datepicker and bootstrap as well as the css for these.
To explain what I am doing, the following html code is the input where I want the datepicker:
<div class="col-md-10 col-md-offset-1 spacer-below-20">
<label>The date</label>
<div class="input-group">
<input class="datepicker" type="text" name="date">
</div>
</div>
Of course I have written a bit of js, which should "link" the input tag to the datepicker:
<script>
$(function(){
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
});
</script>
I really can't figure out why it is not working. I hope some of you can help me out.
Any help will be greatly appreciated.
In the given fiddle , you are calling the below function before loading the js file into DOM.
$('.datepicker').datepicker({
format: 'dd.mm.yyyy'
});
call the script after loading the script or on
$(document).ready(function(){
//code to call
})
https://jsfiddle.net/santoshj/4hmuff8x/2/

cannot invoke bootstrap plugin from javaScript

I am trying to invoke bootstrap plugin for my webpage.
This is the plugin I am talking about:
Select Picker
Select Picker 2
When I invoke the plugin from my html file like this:
<html>
<head></head>
<body>
<select class="selectpicker show-tick" id="tag" ata-style="btn-primary">
<option>stocks</option>
<option>bank</option>
<option>card</option>
</select>
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker('hide');
});
</script>
</body>
</html>
The output is fine; the select boxes come with all CSS loaded as showed in the links above.
However, when I create the boxes dynamically from a JS file, the select boxes come up as plain Select boxes with no effects.
var selectElement1_act = document.createElement("select");
selectElement1_act.setAttribute("class", "selectpicker");
Any help would be appreciated.
This is because you're invoking the function on the window load event, and when elements are created dynamically, they do not necessarily exist in the DOM at that point.
Since you're using jQuery, you'd be better to utilise the following code in your JS file instead:
$(function() {
var selectPicker = $('<select class="selectpicker" />');
selectPicker.appendTo('body');
selectPicker.selectpicker('hide');
});

Combine inline jquery datepicker with an input field?

I know that I can use $('div').datepicker() to get an inline datepicker, but how do I show the datepicker fixed inline underneath its input field?
The alt field option does not work for me because I want the datepicker to also react on a date entered into the input field.
I would need something like the following pseudocode:
<inputfield type="text" id="d" >
<div id="z"></div>
<script> $('#z').datepicker().bindToInputfield($('#d')) </script>
Try this: Working demo http://jsfiddle.net/KRFCH/
The altField option will link to the second field you want! http://jqueryui.com/datepicker/#alt-field
Now note: any change in the input will reflect in the datepicker on change
This should fit your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d'
});
$('#d').change(function(){
$('#z').datepicker('setDate', $(this).val());
});
It's not possible to get the datepicker inline just by using the input field . You need to use a div along with an input to get what you want.
NOTE: Any changes made in the input will reflect in the datepicker
Example Code
<input type="text" id="text" />
<div id="mydiv"></div>
<script>
$('#mydiv').datepicker();
$('#text').change(function(){
$('#mydiv').datepicker('setDate', $(this).val());
});
$('#mydiv').change(function(){
$('#text').attr('value',$(this).val());
});
</script>
Check out this jsfiddle I've created for you: http://jsfiddle.net/v9XCP/

I'm having some trouble trying to get my script to change a element

I have a built a small form on a Drupal site with the following code:
<form id="form">
<button class="btn calc" id="calculator" onclick="return false">Submit</button>
<div class="calcAnswer">£ <span id="result">no value</span></div>
</form>
I would like to use JavaScript to automatically replace the #result element with a value once the button is clicked.
I'm trying this code (but can't seem to get it working:
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").replaceWith('<span id="result">A new value</span>');
});
});
I have been testing in a JSFiddle (http://jsfiddle.net/NFQpw/8/) but am getting nowhere.
Actually, the problem with your fiddle is that you have "No-Library (pure JS)" specified. You need to include jQuery, and your script will work as expected (on the left bar, under "Frameworks & Extensions", select a version of jQuery). There's nothing wrong with your jQuery.
That said, I agree with #Stijn Martens, using .html('A new value') is cleaner; there's no reason to use .replaceWith in this instance.
You can see it working here: http://jsfiddle.net/Jammerwoch/NFQpw/12/
You just need to set the html inside the #result span. Using the .html() function.
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").html('A new value');
});
});
http://jsfiddle.net/Stijntjhe/NFQpw/10/
try this one. just include JS: link
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").replaceWith('<span id="result">A new value</span>');
});
});
It's working, but you're testing with pure Javascript, not jQuery
set on Frameworks & Extensions in the left menu the option jQuery 1.10.1
and it will work

Categories

Resources