I'm using datepicker inside my input , my last field is the datepicker input , after validating it i want to set focus on another input inside my form , but the problem is the datepicker is not closed even taht it does not have the focus..
how can I close the datepicker when i set the focus on another input field?
(I tried .datepicker("hide"); but it did not worked for me).
UPDATE:
this is my code:
$(function()
{ $( "#test_date" ).datepicker({
dateFormat: "dd/mm/yy"
});
});
//when i call my function:
$( "#test_date" ).datepicker("hide"); //---> this does not work!
Thank's In Advance.
Question Edited to work with the latest version of jqueryUI
JqueryUi auto-closes the datepicker when an element loses focus by user interaction, but not when changing focus with JS.
Where you are calling your function which removes focus from the input assigned a datepicker you also need to call:
$("#test_date ~ .ui-datepicker").hide();
This code is hiding the datepicker which is a sibling (~) of #test_date.
To be dynamic, and using the class assigned by jQueryui you can do:
$(".hasDatepicker").on("blur", function(e) { $(this).off("focus").datepicker("hide"); });
;(function() {
function eventOnFocusDP(e, par) {
if (par.ver == $.fn.jquery) {
if (this.tmr) clearTimeout(this.tmr);
par.lbl1.text(par.msgs[1]);
this.tmr = setTimeout(function() { par.inpNP.focus(); }, par.secs*1e3);
}
}
function eventOnFocusNP(e, par) {
if (par.ver == $.fn.jquery) {
par.lbl1.text(par.msgs[0]);
par.lbl2.text(par.msgs[2]);
}
}
function eventOnBlurNP(e, par) {
if (par.ver == $.fn.jquery) par.lbl2.text("");
}
function eventOnBlurHDP(e, par) {
if (par.ver == $.fn.jquery) {
$(this).off("focus").datepicker("hide");
}
}
function test(secs) {
this.ver = $.fn.jquery;
this.secs = (typeof secs)=='number'?secs:2;
this.msgs = [
'This will lose focus to box below '+this.secs+' seconds after it gains focus.',
'Losing focus in '+this.secs+' seconds!',
'Focus now on bottom box.'
];
this.inpDP = $('[name=datePicker]');
this.inpNP = $('[name=nextPicker]');
this.lbl1 = $('#dPMsg').text(this.msgs[0]);
this.lbl2 = $('#dPMsg2');
var par = this;
this.inpDP.datepicker({ dateFormat: "dd/mm/yy" })
.on('focus', function(e) { eventOnFocusDP.apply(this, [e, par]) });
this.inpNP.on('focus', function(e) { eventOnFocusNP.apply(this, [e, par]) });
this.inpNP.on('blur', function(e) { eventOnBlurNP.apply(this, [e, par]) });
$(document).on('blur', '.hasDatepicker', function(e) { eventOnBlurHDP.apply(this, [e, par]) });
return this;
}
function init() {
window.Test = test;
setTimeout(function() {
$(document).on('change', '.switcher, .switcher-ui', function(e) { if (window.Test) new Test(); });
$(jQueryUISwitcher).trigger('change');
}, 1e3);
}
if (document.readyState == "complete") init();
else jQuery(window).on('load', init);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/JDMcKinstry/cfc32292cbbfa548fb9584db05b2b2fc/raw/4f16f7ee441dfb98aa166a2e84193b14574a46d1/jquery.switcher.js"></script>
<form action="javascript: void 0">
<input type="text" name="datePicker" id="dP" placeholder="mm/dd/yyyy" />
<label for="dP" id="dPMsg"></label>
<hr />
<input type="text" name="nextPicker" placeholder="tab to here" />
<label for="dP" id="dPMsg2"></label>
</form>
<hr />
<hr />
<hr />
Here's a modified solution that worked for me:
$(".hasDatepicker").each(function (index, element) {
var context = $(this);
context.on("blur", function (e) {
// The setTimeout is the key here.
setTimeout(function () {
if (!context.is(':focus')) {
$(context).datepicker("hide");
}
}, 250);
});
});
My version of js:
<script type="text/javascript"> $(function () {
$("#dtp1").on("dp.change", function (e) {
$('#dtp1').data("DateTimePicker").hide();
});
});
I hope it's help you
This worked for me:
$("#datepickerTo").datepicker({
onSelect: function () {
$(this).off( "focus" );
}
});
Related
function init() {
$('.message-composition__footer')
.prepend('<input type="text" id="datepicker_1" placeholder="Select date" class="input input--pilled event-form__date-input u-hide-focus" readonly>');
let dp = $( "#datepicker_1" );
console.log(dp);
$(dp).datepicker({
showOn: 'both',
onSelect: function (dateText, inst) {
schedule_date = dateText;
$( dp ).val(dateText);
console.log("schedule_date - " + schedule_date);
}
});
};
document.addEventListener('turbolinks:load', () => {
console.log('turbolinks:load');
init();
});
(function($) {
console.log('new-message script loaded');
init();
})(jQuery);
'turbolinks:load' event fires successfully but datepicker does not work.
if I reload the page then it works. I'm stuck here for 2 days now, please help.
Datepicker after reloading page
Datepicker without reloading page (when 'turbolinks:load' event fires)
$(document).tooltip({
items:'.tooltip-object',
tooltipClass:'preview-tip',
position: { my: "left+15 top", at: "right center" },
content:function(callback) {
$.get('/resources/generate_tooltip.php', {
id:$(this).data("tooltipid")
}, function(data) {
callback(data);
});
}
});
Say I have the above script that shows tooltips when users hover over a tooltip-object link. Right now the tooltip displaying works fine but if a user rapidly moves their mouse over a bunch of links they will all call the /resources/generate_tooltip.php script even if they will never display.
How would I add a delay to the tooltip so that a user has to keep their mouse on the tooltip-object for a set amount of time before the tooltip is generated?
Inside your content:function(callback) { , add checking if none of the tooltips is triggered with this:
if ($(".your-tooltip-class").length == 0) {
$.get('/resources/generate_tooltip.php', {
id:$(this).data("tooltipid")
}, function(data) {
callback(data);
});
}
UPDATE: You can try something like this.instead of alert make your ajax call.
var timeout;var counter=0;
$(function() {
$( ".selector" ).tooltip();
});
$(".selector").hover(function(e){
var $this=this;
if (!timeout) {
timeout = window.setTimeout(function() {
timeout = null;
$($this).tooltip( "option", "content", "Awesome title!"+(counter++) );
}, 1000);//delay of 1 second
}},clearIt);
function clearIt() {
if (timeout) {
window.clearTimeout(timeout);
timeout = null;
}
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<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.1/jquery-ui.js"></script>
<input title="hi" class='selector'>
Anyone know how to change the text on a checkbox and have the size of the checkbox scale appropriately?
http://jsfiddle.net/bobbyrne01/szwz2L2m/
html ..
<input id="audioCheckbox" type="checkbox" />
<label id="audioCheckboxText" for="audioCheckbox">Enabled</label>
js ..
$(function () {
$("input:checkbox").button();
$("#audioCheckbox").click(function (e) {
if (this.checked) {
$("#audioCheckboxText").text('Enabled');
} else {
$("#audioCheckboxText").text('Disabled');
}
});
});
Change the .html() of the label, not the .text():
$(function () {
$("input:checkbox").button();
$("#audioCheckbox").click(function (e) {
if (this.checked) {
$("#audioCheckboxText").html('<span class="ui-button-text">Enabled</span>');
} else {
$("#audioCheckboxText").html('<span class="ui-button-text">Disabled</span>');
}
});
});
jsFiddle example
I'm using jquery-ui's datepicker with a Ractive template, and the two-way binding doesn't seem to be working properly.
My input looks like this:
<input type="text" value="{{value}}" decorator="picker">
Then I'm instantiating the date picker through the "picker" decorator:
decorators: {
picker: function(node) {
$(node).datepicker();
return {
teardown: function() {
$(node).datepicker("destroy");
}
};
},
}
The datepicker shows up perfectly, but value doesn't get updated properly. If I through and observer on {{value}} I see that Ractive doesn't think the value has changed once it's been set by the datepicker. If I click into the field, and back off again (losing focus), the observer triggers, and the value is set.
In my decorator I can setup a callback to trigger using the datepickers "onSelect" event, but how do I force a ractive change event from the decorator function?
decorators: {
picker: function(node) {
$(node).datepicker({
onSelect: function(dateValue) {
console.log("datevalue set");
//I've tried this already
$(node).change();
//and
$(node).trigger("change");
//neither work
}
});
return {
teardown: function() {
$(node).datepicker("destroy");
}
};
},
}
In the decorator function, this refers to the current ractive instance, so you can call ractive.updateModel() to let it know the model needs to be updated based on the view:
decorators: {
picker: function(node) {
var ractive = this
$(node).datepicker({
onSelect: function(dateValue) {
ractive.updateModel()
}
});
return {
teardown: function() {
$(node).datepicker("destroy");
}
};
},
}
(See http://jsfiddle.net/arcca09t/)
Edited
The current version of ractive use the as-* convention for decorators, you should edit the html like this:
<input type="text" value="{{value}}" as-picker>
ractive no longer uses decorator attributes like that. But martypdx's suggestion sent me in the right direction.
$(function(){
var r = new Ractive({
el: document.body,
template: '#template',
data: {
value: null
},
decorators: {
picker: function(node) {
var ractive = this
$(node).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateValue) {
ractive.updateModel()
}
});
return {
teardown: function() {
$(node).datepicker("destroy");
}
};
},
}
})
})
<script src="https://cdn.jsdelivr.net/npm/ractive#0.9.5/ractive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script id='template' type='text/ractive'>
value: {{value}}
<br>
<input type="date" value="{{value}}" as-picker>
</script>
This fiddle shows how to bind a jQuery slider 'slide' event to a Knockout observable. How would this need to change to also bind the 'max' option of the slider to an observable? Do you have to create an entirely new ko.bindingsHandler entry? Or can the existing one be used?
Here is the code from the fiddle for reference.
HTML
<h2>Slider Demo</h2>
Savings: <input data-bind="value: savings, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>
Spent: <input data-bind="value: spent, valueUpdate: 'afterkeydown'" />
<div style="margin: 10px" data-bind="slider: spent, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>
Net: <span data-bind="text: net"></span>
JS
ko.bindingHandlers.slider = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().sliderOptions || {};
$(element).slider(options);
ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).slider("destroy");
});
ko.utils.registerEventHandler(element, "slide", function (event, ui) {
var observable = valueAccessor();
observable(ui.value);
});
},
update: function (element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
if (isNaN(value)) value = 0;
$(element).slider("value", value);
}
};
var ViewModel = function() {
var self = this;
self.savings = ko.observable(10);
self.spent = ko.observable(5);
self.net = ko.computed(function() {
return self.savings() - self.spent();
});
}
ko.applyBindings(new ViewModel());
Look at this fiddle. I added checking if max is observable and subscribing to it:
if (ko.isObservable(options.max)) {
options.max.subscribe(function(newValue) {
$(element).slider('option', 'max', newValue);
});
options.max = ko.utils.unwrapObservable(options.max);
}
I have a collection of jQUery Ui bindings for KO. I havent done the slider because I havent needed that control in a project. But check my button binding
https://github.com/AndersMalmgren/Knockout.Bindings
ko.bindingHandlers.button = {
initIcon: function (options) {
if (options.icon) {
options.icons = { primary: options.icon };
}
},
init: function (element, valueAccessor) {
var options = ko.utils.unwrapObservable(ko.toJS(valueAccessor())) || {};
ko.bindingHandlers.button.initIcon(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).button("destroy");
});
$(element).button(options);
},
update: function (element, valueAccessor) {
var options = ko.toJS(valueAccessor());
ko.bindingHandlers.button.initIcon(options);
if (options) {
$(element).button(options);
}
}
};
The magic is done in the update function, KO will by default subscribe to all observables in a object literal, so if you bind to { max: aObservable } the update function will trigger when any child updates.
I then do ko.toJS(valueAccessor()); to un observify the object and use that to update the jQuery control. This method can be used for slider as well, its generic and you do not need to add extra code for each setting