Why my focus is not working properly?

Question

I have data.json file is being loaded after I focus but after I focus then my datepicker is not showing why I didn't understand. but if I focus second time I can see.. where is my mistake ?

 function flattenFieldsArray(arr) { return arr.map(function(item) { return item.field }) } $(function() { var focused = false; $(document.body).one("focus", '#checkin,#checkout', function() { if (!focused) { $.getJSON('data.json', function(data) { // use ajax data mapped to same structure as original variables var firstDate = flattenFieldsArray(data.firstDate); var lastDate = flattenFieldsArray(data.lastDate); var availabledays = flattenFieldsArray(data.availabledays); var booked = flattenFieldsArray(data.booked);; var ssdays = []; // nothing was changed below var dateFormat = "mm/dd/yy", from = $("#checkin").datepicker({ changeMonth: true, numberOfMonths: 2, firstDay: 1, minDate: new Date(firstDate), maxDate: new Date(lastDate), onSelect: function(selectedDate) { var yenitarih = new Date(); var date = $(this).datepicker('getDate'); date.setTime(date.getTime() + (1000 * 60 * 60 * 24)) $("#checkout").datepicker("option", "minDate", date); }, beforeShowDay: function(date) { var y = date.getFullYear().toString(); // get full year var m = (date.getMonth() + 1).toString(); // get month. var d = date.getDate().toString(); // get Day if (m.length == 1) { m = '0' + m; } // append zero(0) if single digit if (d.length == 1) { d = '0' + d; } // append zero(0) if single digit var currDate = y + '-' + m + '-' + d; if (jQuery.inArray(currDate, availabledays) >= 0) { return [false, "ui-highlight"]; } if (jQuery.inArray(currDate, booked) >= 0) { return [true, "ui-bos"]; } else { return [true]; } }, isTo1: true, }).on("change", function() { to.datepicker("option", "minDate", getDate(this)); }), to = $("#checkout").datepicker({ changeMonth: true, changeYear: true, firstDay: 1, numberOfMonths: 2, minDate: new Date(firstDate), maxDate: new Date(lastDate), onSelect: function(selectedDate) { $("#checkin").datepicker("option", "maxDate", selectedDate); }, beforeShowDay: function(date) { var y = date.getFullYear().toString(); // get full year var m = (date.getMonth() + 1).toString(); // get month. var d = date.getDate().toString(); // get Day if (m.length == 1) { m = '0' + m; } // append zero(0) if single digit if (d.length == 1) { d = '0' + d; } // append zero(0) if single digit var currDate = y + '-' + m + '-' + d; if (jQuery.inArray(currDate, booked) >= 0) { return [true, "ui-highlight-donus"]; } if (jQuery.inArray(currDate, availabledays) >= 0) { return [true, "ui-bos"]; } if (jQuery.inArray(currDate, ssdays) >= 0) { return [true, "ui-ss-donus"]; } else { return [true]; } } }).on("change", function() { from.datepicker("option", "maxDate", getDate(this)); }); }) focused = true; } }); }); 

 .form{ width:960px; margin:120px auto; } .form input{ width:250px; padding:10px; } .ui-highlight .ui-state-default{background: red !important;border-color: red !important;color: white !important; cursor:no-drop;} .ui-bos .ui-state-default{background: green !important;border-color: green !important;color: white !important;} .ui-ss .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;} .ui-ss-donus .ui-state-default{background: yellow !important;border-color: yellow !important;color: gray !important; cursor:help;} .ui-highlight-donus .ui-state-default{background: red !important;border-color: red !important;color: white !important; } .ui-testtarih .ui-state-default{ background:black !important; color:#FFF !important; } 

 <link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> <div class="form"> <input type="text" id="checkin" /> <input type="text" id="checkout" /> <input type="submit" value="Search" /> </div> <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> 

footnote: I couldn't add my json data to stackoverflow snippet that's why I add plunker demo in plunker demo works

Click to see plunker demo

Answer 1

$.getJSON has a done() function in which you can write you logic after data is loaded. You can trigger the datepicker manually inside the done function

Here's a working fork

Answer 2

It is because, on the first focus, the datepickers are applied on the elements and NOT triggered. Mind the difference between binding an event and triggering it. On the first time focus, datepicker will be applied and NOT triggered as it is not already bound to the element. But on any subsequent focus, it would trigger the datepicker and open it since it is already bound to the element.

As a solution,you can try adding $("#checkin").datepicker('show'); and $("#checkout").datepicker('show'); after the end for $("#checkin").datepicker({}) and $("#checkout").datepicker({}) , respectively.

Answer 3

You should load your data prior to the first focus event on your datepickers.

Here's an example :

plunkr

$( document ).ready(function() {
    var data;
    $.getJSON('data.json', function (d) {
        data = d;
        console.log('data', d);
        setupDatepickers();
    });

    function setupDatepickers() {
        // use ajax data mapped to same structure as original variables
                 var firstDate = flattenFieldsArray(data.firstDate);
                 var lastDate = flattenFieldsArray(data.lastDate);
                 var availabledays = flattenFieldsArray(data.availabledays);
                 var booked = flattenFieldsArray(data.booked);;
                 var ssdays = [];

                 // nothing was changed below

                 var dateFormat = "mm/dd/yy",
                     from       = $("#checkin")
                         .datepicker({
                             beforeShowDay : function (date) {
                                 var y = date
                                     .getFullYear()
                                     .toString(); // get full year
                                 var m = (date.getMonth() + 1).toString(); // get month.
                                 var d = date
                                     .getDate()
                                     .toString(); // get Day
                                 if (m.length == 1) {
                                     m = '0' + m;
                                 } // append zero(0) if single digit
                                 if (d.length == 1) {
                                     d = '0' + d;
                                 } // append zero(0) if single digit
                                 var currDate = y + '-' + m + '-' + d;
                                 if (jQuery.inArray(currDate, availabledays) >= 0) {
                                     return [false, "ui-highlight"];
                                 }

                                 if (jQuery.inArray(currDate, booked) >= 0) {
                                     return [true, "ui-bos"];
                                 } else {
                                     return [true];
                                 }

                             },
                             changeMonth   : true,
                             firstDay      : 1,
                             isTo1         : true,
                             maxDate       : new Date(lastDate),
                             minDate       : new Date(firstDate),
                             numberOfMonths: 2,
                             onSelect      : function (selectedDate) {
                                 var yenitarih = new Date();

                                 var date = $(this).datepicker('getDate');
                                 date.setTime(date.getTime() + (1000 * 60 * 60 * 24))

                                 $("#checkout").datepicker("option", "minDate", date);
                             }
                         })
                         .on("change", function () {
                             to.datepicker("option", "minDate", getDate(this));
                         }),
                     to         = $("#checkout")
                         .datepicker({
                             beforeShowDay : function (date) {
                                 var y = date
                                     .getFullYear()
                                     .toString(); // get full year
                                 var m = (date.getMonth() + 1).toString(); // get month.
                                 var d = date
                                     .getDate()
                                     .toString(); // get Day
                                 if (m.length == 1) {
                                     m = '0' + m;
                                 } // append zero(0) if single digit
                                 if (d.length == 1) {
                                     d = '0' + d;
                                 } // append zero(0) if single digit
                                 var currDate = y + '-' + m + '-' + d;

                                 if (jQuery.inArray(currDate, booked) >= 0) {
                                     return [true, "ui-highlight-donus"];
                                 }

                                 if (jQuery.inArray(currDate, availabledays) >= 0) {
                                     return [true, "ui-bos"];
                                 }

                                 if (jQuery.inArray(currDate, ssdays) >= 0) {
                                     return [true, "ui-ss-donus"];
                                 } else {
                                     return [true];
                                 }
                             },
                             changeMonth   : true,
                             changeYear    : true,
                             firstDay      : 1,
                             maxDate       : new Date(lastDate),
                             minDate       : new Date(firstDate),
                             numberOfMonths: 2,
                             onSelect      : function (selectedDate) {
                                 $("#checkin").datepicker("option", "maxDate", selectedDate);
                             }
                         })
                         .on("change", function () {
                             from.datepicker("option", "maxDate", getDate(this));
                         });

    }
});