Datepicker is not working properly first time - jquery-ui-datepicker

I am facing one problem that Datepicker is not working properly first time, i.e. first time when i open the page and click on "from"/"to" input field, the datepicker opens but I cannot select a date as I get an error on console: "Uncaught Missing instance data for this datepicker". But when I refresh page, it perfectly works!
Why does this happens?
This is my code:
$('.datepicker').live('focus',function(){
$(this).datepicker({
defaultDate : "+1w",
changeMonth : true,
numberOfMonth : 1,
dateFormat: 'dd-mm-yy'
});
});
can you tell is it right to use '.live' method here?

i guess you are doing this
$("#datepicker").click(function(){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
May be only this will work as it did for me
$(function() {
$("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' }).val();
});
If its for multiple inputs just make use of class name instead of id.

$('.datepicker').on('focus',function(){
$(this).datepicker({
defaultDate : "+1w",
changeMonth : true,
numberOfMonth : 1,
dateFormat: 'dd-mm-yy'
});
});
Try this

for it to show first time you can do this inside on click:
$("#datepicker").datepicker().datepicker( "show" )

You can try this
$('body').on('focus',".datepicker", function(){
$(this).datepicker();
});​

Related

Ember tests: checkbox

I'm developing ember tests and I want to check if error messages are correctly displayed.
For that I need to check a specific checkbox (or groups of checkboxes) from a list.
Is there a way to specify which checkboxes we want?
Maybe using some kind of parameter that we can pass to choose which we want to select?
Thanks
I figure out how to solve it. I used a collection to identify the elements.
Thanks all for your help!
//products.js
export default create({
main: {
scope: '#main',
allProducts: collection({
itemScope: '.products-list',
item: {
name: text('.card-h1'),
click: clickable('.card-h1'),
color: text('.product-color'),
quantity: text('.product-quantity'),
},
}),
}
});
// products-test.js
function getSingleProduct(name) {
return products.main.allProducts()
.filter(p => p.name.trim() === name).get(0);
}
assert.equal(product.color, 'red');
assert.equal(product.quantity, 10);

Datepicker (month and year) not working inside fancybox

I am having a problem with my fancybox 3 and jquery ui datepicker.
if I place the datepicker outside the fancybox.. the dropdown for months and years are working.. but when I place it inside fancybox. the dropdown is not being triggered. any idea what is happening?
$("#Date_To").datepicker({changeMonth: true,changeYear: true});
image
Try disabling focusing, something like this:
$('[data-fancybox]').fancybox({
autoFocus : false,
trapFocus : false,
touch : false,
beforeClose : function() {
$( ".selector" ).datepicker( "hide" );
}
});
Demo - https://codepen.io/fancyapps/pen/QqLXaz
I tried using modal and found a solution. is there any way I can covert this code for fancybox?
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enfor

Bootstrap Datetimepicker function moment() issues

I am using Bootstrap 3 Datetimepicker with Rails 4.
Issues is with, when I have validations on the datetimepicker.
$('#start_date').datetimepicker({
format: 'DD-MM-YYYY hh:mm A',
minDate: moment(),
widgetPositioning: {
horizontal: 'auto',
vertical: 'auto'
}
});
So, with this I cannot select the datetime before current time which is my requirement. But when I edit the particular record, I get the current time only. It does not shows me the saved datetime from the datatbase.
If I remove the minDate, it shows me the correct datetime.
Is there any way to handle this ? Or I have to handle through backend only by removing the minDate?
This is the link which I am following:
https://eonasdan.github.io/bootstrap-datetimepicker/
Thanks.
Have you tried something like:
$('#start_date').datetimepicker({
format: 'DD-MM-YYYY hh:mm A',
minDate: moment(),
keepInvalid: $('#start_date').val() ? true : false,
widgetPositioning: {
horizontal: 'auto',
vertical: 'auto'
}
});

Ember: Return randomized property value on each reload

I have a loading template in which I want to show a random "please wait" message each time the loading route is used, but while the randomness works the first time, the property is then set and doesn't refresh. How do I return a random value each time the route is loaded?
I tried creating a timestamp property and adding that to the watched fields, but again, that property is only set once and then doesn't refresh. I also tried just adding "Date()" to the watch list, and it really didn't like that (understandable since it isn't a field).
Here's my loading controller code:
import Ember from 'ember';
//app/controllers/loading.js
export default Ember.ObjectController.extend({
loadingText: [
'Your wish is my command.',
'Loading, please hang on.',
'I\'ll be back in two shakes of a lamb\'s tail.',
'Your request is very important to us...',
'Hmmmm hmm hmmm...',
'It shall be as you say...',
'Let me get that for you.'
],
randLoadingText: Ember.computed('loadingText', function() {
var loadingText = this.loadingText;
return (loadingText[Math.floor(Math.random()*loadingText.length)]);
})
});
Did you try to use volatile option on property?
//app/controllers/loading.js
export default Ember.ObjectController.extend({
loadingText: [
'Your wish is my command.',
'Loading, please hang on.',
'I\'ll be back in two shakes of a lamb\'s tail.',
'Your request is very important to us...',
'Hmmmm hmm hmmm...',
'It shall be as you say...',
'Let me get that for you.'
],
randLoadingText: function() {
var loadingText = this.loadingText;
return (loadingText[Math.floor(Math.random()*loadingText.length)]);
}.property().volatile()
});

jQuery .load() not working in Django

I'm trying to make a call to a url in Django and load the contents of it. Right now I have:
<script>
$('.myClass').load('{% url update_dropdown %}',
{'kind': "Book" },
function(data){
alert(data);
});
</script>
And then the view that update_dropdown refers to is:
#csrf_exempt
def update_dropdown(request):
category = request.POST.get('kind', None)
all =False;
args = {
"label":category,
"all":all
}
return render_to_response('template.html',(args))
However, the .load() won't work for some reason. If I go directly to the URL it shows the data I expect, but .load() won't cooperate. I know it's not a display issue, as the alert will not work (unless I remove the #csrf_exempt, then it alerts the HTML of the error page)
I'm pretty confused as to what's going on, and I've been debugging this and trying to find the error for hours now, any help would be appreciated .
I can get it to work if I make the return type a JSON object and use getJSON(), but I'd prefer not to
Try wrapping it in a ready:
$(document).ready( function () {
$('.myClass').load('{% url update_dropdown %}',
{'kind': "Book" },
function(data){
alert(data);
});
});
Apparently it was an issue with the jQuery uiSelect library I was using. It was out of date and causing errors.