Develop Reference

HTML input value disappears after adding jquery datepicker option?

I have multiple text inputs like this:
<input type="text" class="datepicker" value="11-11-2016">
And the jquery script:
$(".datepicker").each(function() {
$(this).datepicker();
$(this).datepicker("option", "changeYear", true);
});
The input value disappears immediately after the page loads!!!
If I remove the option:
$(this).datepicker("option", "changeYear", true);
... the value doesn't dissapear, but whenever I add any of the jquery datepicker options - the value dissapears!?

I think the problem it's in your initialization, try this:
$(function(){
$('.datepicker').each(function(){
$(this).datepicker({"changeYear": true});
});
});
Here's a working fiddle

Try this line afterwards to rectify the issue:
$(".datepicker").each(function() {
$(this).datepicker();
$(this).datepicker("option", "changeYear", true);
$(this).attr("value", "11-11-2016");
});
If the attributes are dynamic per $(".datepicker"), then use the following:
function getElemAttributes(var element) {
var attrs = {};
var attrMap = element.attributes;
$.each(attrMap, function (i, e) { attrs[e.nodeName] = e.nodeValue; });
return attrs;
}
to get all of the attributes as an object. So:
$(".datepicker").each(function() {
$(this).datepicker();
// Returns something like { id: "datepicker", ..., value: "11-11-2016" }
var originalAttributes = getElemAttributes(this);
// Do stuff that affects attr on element.
$(this).datepicker("option", "changeYear", true);
// Set element attributes from riginal attributes object.
if (originalAttributes.hasOwnOroperty("value")) {
$(this).attr("value", originalAttributes["value"]);
}
else {
// Didn't originally have a "value" attribute - set some default here?
}
});

You should use this option to set the initial date:
$( ".selector" ).datepicker( "setDate", "10/12/2012" );
in you code example:
$(".datepicker").each(function() {
$(this).datepicker();
$(this).datepicker("option", "changeYear", true);
$(this).datepicker( "setDate", "10/12/2012" );
});

You need this:
$(document).ready(function () {
$('.datepicker').each(function(){
$(this).datepicker();
$(this).datepicker("option", "changeYear", true);
$(this).datepicker( "setDate", $(this)[0].getAttribute('value') );
});

This command helped me with the problem like yours:
let date = $(this.dateInput.nativeElement).val().toString();
....
$(this.dateInput.nativeElement).datepicker().val(date).trigger('change');

Disabling submit button until multiple checkboxes are checked

I would like to disable a form submit button until 4 checkboxes are checked. I created a quick jsfiddle to represent my code that is not working as expected.
Here is my JS:
$(function() {
$("#question1, #question2, #question3, #question4").change(function() {
if( $("#question1").checked && $("#question2").checked && $("#question3").checked && $("#question4").checked ) {
$('.next_button').disabled = false;
}
else {
$('.next_button').disabled = true;
}
});
});
And the HTML:
<input id="question1" name="question1" type="checkbox" value="1">
<input id="question2" name="question2" type="checkbox" value="1">
<input id="question3" name="question3" type="checkbox" value="1">
<input id="question4" name="question4" type="checkbox" value="1">
<input class="next_button" name="commit" type="submit" value="Next" disabled="">
I am missing something simple here. Appreciate any thoughts!

Two issues here.
First, .checked is a Javascript attribute so using it on jQuery object wouldn't work. You will need to use jQuery's .is(':checked') call instead.
Second, on the JSFiddle you posted, you were using jQuery version 1.4.4, which didn't have .prop() support for the disabled attribute, thus you will need to use the attr() function to toggle the disabled state, instead.
See the updated function below:
$(function () {
$("#question1, #question2, #question3, #question4").change(function () {
if ($("#question1").is(':checked') &&
$("#question2").is(':checked') &&
$("#question3").is(':checked') &&
$("#question4").is(':checked') ) {
$('.next_button').attr('disabled', false);
} else {
$('.next_button').attr('disabled', true);
}
});
});
Working code at: JSFiddle

Try this
$(function() {
$("#question1, #question2, #question3, #question4").on( 'change', function() {
$('button.next_button').prop( 'disabled', $(':checkbox:checked').length === 4);
});
});

You have used old jQuery version 1.4 in Fiddle demo, so new function will not work properly
please try this way..
$(function() {
$("input[type=checkbox]").bind("click", function(e){
if($("input[type=checkbox]").serializeArray().length ==
$("input[type=checkbox]").length){
$(".next_button").removeAttr('disabled');
}else{
$(".next_button").attr('disabled', "disabled");
}
})
});
FIDDLE DEMO
I would preferred single selector e.g. class, element type instead of repeated ids of all elements

Instead of $('.next_button').disabled = false;, try using $('.next_button').prop("disabled", false); - likewise for setting it true. Some properties are removed, not set to false, so using the prop syntax will handle this for you.

Use this function
$(function() {
$("#question1, #question2, #question3, #question4").change(function() {
if( $('#question1').attr('checked') && $('#question2').attr('checked') && $('#question3').attr('checked') && $('#question4').attr('checked') ) {
$('.next_button').removeAttr('disabled');
}
else {
$('.next_button').attr('disabled','disabled');
}
});
});
Here is the fiddle link http://jsfiddle.net/CPFns/51/

I have updated your fiddle
Here is what I have changed in your code:
$(function() { $("#question1, #question2, #question3, #question4").change(function() {
if( $("#question1").attr('checked') && $("#question2").attr('checked') && $("#question3").attr('checked') && $("#question4").attr('checked') ) {
$('.next_button').attr("disabled",false);
}
else {
$('.next_button').attr("disabled",true); } });});
Thanks

try this
$(function() {
$('input[type="checkbox"]').change(function(){
if($('input[type="checkbox"]:checked').length >= 4){
$('.next_button').removeAttr('disabled');
}
else{
$('.next_button').attr('disabled', 'disabled');
}
});
});

Use
$(function() {
$(':checkbox').on( 'change', function() {
if( $(':checkbox:checked').length === 4 ) {
$('input.next_button').prop( 'disabled', false );
} else {
$('input.next_button').prop( 'disabled', true );
}
});
});
JS FIDDLE DEMO

You may try this:
$(function () {
$("input[name^=question]").change(function (e){
e.stopPropagation();
var toDisabled = (4 !== $("input[name^=question]:checked").length);
$(".next_button").prop('disabled', toDisabled);
});
});
DEMO

jQuery autocomplete 1.1: Show All Data on focus

How to make this extension show all data on focus?. I have tried to change minChars to 0 but it only show when the input double clicked.
$("#month").autocomplete(months, {
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i, total) {
// don't show the current month in the list of values (for whatever reason)
if ( data[0] == months[new Date().getMonth()] )
return false;
return data[0];
}
});

You need to bind a focus event to the input and call the jQuery UI method as a result. Take a look at this js fiddle for an example
I added the following code:
$('#month').autocomplete({
// Your current code
}).on('focus', function(event) {
var self = this;
$(self).autocomplete( "search", this.value);;
});
the value passed into the search method is what the autocomplete will look for.
How to search for all values on focus
If you want all available dropdowns leave it as "" but add minLength : 0 to the options object.
$('#month').autocomplete({
minLength : 0
}).on('focus', function(event) {
$(this).autocomplete("search", "");
});

I recently had the same problem, due to this plugin is old (and deprecated), there is very little documentation available for this version.
This worked for me:
var __n_clicks = 0;
$("#autocomplete_input").autocomplete(data, {
minChars: 0,
...
}).on('click', function(event) {
if(__n_clicks < 1){
__n_clicks++;
$(this).click();
}else {
__n_clicks = 0;
}
});
executing "dblclick" didn't work either, it had to be 2 clicks.

If you want some combobox with this plugin try this:
$('.lookup').on('click', function(event) {
var str =$(this).attr('id');
$('#'+str.slice(1)).focus().click().click();
});

$(".autocomplete_input").autocomplete(availableTags, {
minChars: 0,
}).focus(function(event) {
$(this).click();
});
this could also work for one click only, but it's best to just switch plugin entirely.

Checkbox not working properly

Here is my piece of code in jquery actuall I want in such way where :
Where by default value of Ball will be shown in Textbox.
same time either All or Stopall will be work(it's not working here properly :( )
For multiple times checking All button,which is not working according to the expectation
here is the fiddle link : http://jsfiddle.net/bigzer0/PKRVR/11/
$(document).ready(function() {
$('.check').click(function(){
$("#policyName").val('Start');
$("#features").val('');
$('[name="startall"]').on('click', function() {
var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
if (this.checked) {
$checkboxes.prop({
checked: true,
disabled: true
});
}
else{
$checkboxes.prop({
checked: false
});
}
});
$(".check").each(function(){
if($(this).prop('checked')){
$("#policyName").val($("#policyName").val() + $(this).val());
$("#features").val($("#features").val() + $(this).data('name'));
}
});
});
});
Any comments on this context will be welcome

You're code is broken in many ways. You are binding a click event inside a click event. You should take that outside and just make sure it's inside the document.ready function since your element is a static element.
$(document).ready(function() {
// cache features
var $features = $('#features');
// cache policyname
var $policy = $("#policyName");
// cache all/stopall
var $ss = $('[name="startall"],[name="stopall"]');
// cache all others
var $checkboxes = $('input[type="checkbox"]').not($ss);
// function to update text boxes
function updateText() {
var policyName = 'Start';
var features = '';
// LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
$checkboxes.filter(':checked').each(function(i, v) {
policyName += $(v).val();
features += $(v).data('name');
});
// update textboxes
$policy.val(policyName);
$features.val(features);
}
$checkboxes.on('change', function() {
updateText();
// check startall if all three boxes are checked
$('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
});
$('input[name="startall"]').on('change', function() {
$checkboxes.prop({
'checked': this.checked,
'disabled': false
});
updateText();
});
$('input[name="stopall"]').on('change', function() {
$checkboxes.add('[name="startall"]').prop({
'checked': false,
'disabled': this.checked
});
updateText();
});
// updatetext on page load
updateText();
});​
FIDDLE

you are checking click function in click function. you should use if statement.

jQuery Mobile -> Override jQuery UI Datepicker -> Layout broken

I am using jQuery Mobile in my web application. There is a datepicker which overrides the default jQuery UI datepicker.
Here is the source:
https://github.com/jquery/jquery-mobile/tree/master/experiments/ui-datepicker
The JavaScript file which overrides it, is here:
https://github.com/jquery/jquery-mobile/blob/master/experiments/ui-datepicker/jquery.ui.datepicker.mobile.js
I have this line of code:
$(".ui-page").live("pagecreate", function(){
$("input[type='date'], input[data-type='date']").each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true }));
});
});
In this case, I get a datepicker which is always visible. To have the visibility only if a user clicks into a date text field, the datepicker must be connected to the input field, which is here not the case.
So I have to delete the .after("<div />"). But then, the design of the datepicker is totally broken, it seems that the rewrite of the datepicker does not take effect, because the CSS styles are not applied.
So, what's wrong here?
Thank you in advance & Best Regards.

This was my solution
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
$(this).after( $( "<div />" ).datepicker({ altField: "#" + $(this).attr( "id" ), showOtherMonths: true }) );
});
$('.hasDatepicker').hide();
$( "input[type='date'], input:jqmData(type='date')" ).click(function(){
$(this).next('.hasDatepicker').show();
})
$( '.ui-datepicker-calendar a' ).live('click', function() {
$( '.hasDatepicker' ).hide('slow');
});
});

To fix the calendar problem you just need to change a selector in Squish's code
$( '.ui-datepicker-calendar a' ).live('click', function() {
$( '.hasDatepicker' ).hide('slow');
});
Example Here
Creating this in a dialog is simple too, just put it in another html and call it like so
Open dialog
Dialog Documentation

You were correct, I apologize for not properly implementing it the first time.
This should fix your issue:
It will hide your calendar on load, show it when the input is in focus (clicked on or tabbed to) and hide it again as soon as a date is selected (but will not interfere with switching months).
$(function()
{
$( '.hasDatepicker' ).hide();
$( '#date' ).focus(function() {
$( '.hasDatepicker' ).show('slow');
});
$( '.ui-body-c a' ).live('click', function() { // .live() event important
//or else clicks stop functioning
//after first selection
$( '.hasDatepicker' ).hide('slow');
});
});
Here is the example live

I had the same issue with two datepickers in the same page. This was my solution:
HTML code:
<div data-role="fieldcontain">
<div id="startPicker">
<input type="date" name="startDate" id="startDate" value=""/>
</div>
<div id="endPicker">
<input type="date" name="endDate" id="endDate" value=""/>
</div>
</div>
This was tested in Safari browser.
Inspect the date input element.
Look that, inside the <div data-role="fieldcontain" ...>. there is a new DIV that was created dinamically and has this id="dp1298574069963". I captured it in a variable (var idDivStart = $("#startPicker div").attr("id");) and use it variable to specify that all elements inside that Div that has the ui-datepicker class will be shown ($("#"+idDivStart+" .ui-datepicker").show();).
JS code:
$(function() {
$(".ui-datepicker").hide();
// startDate datepicker
var idDivStart = $("#startPicker div").attr("id");
$("#startDate").focus(function() {
$("#"+idDivStart+" .ui-datepicker").show();
});
// endDate datepicker
var idDivEnd = $("#endPicker div").attr("id");
$("#endDate").focus(function() {
$("#"+idDivEnd+" .ui-datepicker").show();
});
//
$(".ui-datepicker-calendar a").live("click", function() {
$(".ui-datepicker").hide();
});
//
$(".inputsText").focus(function() {
$(".ui-datepicker").hide();
});
//
$("div").attr("tabindex",-1).focus(function() {
$(".ui-datepicker").hide();
});
});
I hope to help you.

The author of mobile datepicker has a functioning example on his git page.
It hides the datepicker and displays an input box as intended. What exactly is the difference between your implementation and the standard? Can you give a working snippet of what you're doing? You can mark it up on JSBin if you feel that'll be easier.

I had a similar problem working with two dates and this worked:
Markup (C# MVC3):
<div data-role="fieldcontain" id="fooDate1Div">
<%: Html.LabelFor(model => model.fooDate1) %>
<%: Html.TextBox("fooDate1", Model == null ? Customer.GetLocalTime().ToString("d") : Model.fooDate1.ToString("d"), new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate1"}})%>
<%: Html.ValidationMessageFor(model => model.fooDate1)%>
</div>
<div data-role="fieldcontain" id="fooDate2Div">
<%: Html.LabelFor(model => model.fooDate2) %>
<%: Html.TextBox("fooDate2", Model != null ? Model.fooDate2 : null, new Dictionary<string, object>{{"type", "date"}, {"id", "fooDate2"}})%>
<%: Html.ValidationMessageFor(model => model.fooDate2) %>
</div>
Script:
<script>
$(function () {
$(".ui-datepicker").hide();
// fooDate1 datepicker
var idDivStart = $("#fooDate1Div div").attr("id");
$("#fooDate1").focus(function () {
$("#" + idDivStart + " .ui-datepicker").show('fast');
});
// followUp datepicker
var idDivEnd = $("#fooDate2Div div").attr("id");
$("#fooDate2").focus(function () {
$("#" + idDivEnd + " .ui-datepicker").show();
});
$(".ui-datepicker-calendar a").live("click", function () {
$(".ui-datepicker").hide();
});
});
</script>