為什么我的焦點無法正常工作？

Question

我聚焦后有data.json文件正在加載，但是聚焦后我的日期選擇器沒有顯示我不理解的原因。 但是如果我第二次專注，我就能看到..我的錯誤在哪里？

 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> 

腳注：我無法將我的json數據添加到stackoverflow片段中，這就是為什么我在plunker演示作品中添加了plunker演示

單擊以查看插件演示

Answer 1

$.getJSON有一個done()函數，您可以在其中加載數據后編寫邏輯。 您可以在完成函數中手動觸發日期選擇器

這是工作叉

Answer 2

這是因為，首先要注意的是，日期選擇器已應用於元素，並且未觸發。 注意綁定事件和觸發事件之間的區別。 在第一個時間焦點上，將應用datepicker且未觸發它，因為它尚未綁定到該元素。 但是，在隨后的任何焦點上，它將觸發日期選擇器並打開它，因為它已經綁定到該元素。

作為解決方案，您可以嘗試添加$("#checkin").datepicker('show'); 和$("#checkout").datepicker('show'); 在$("#checkin").datepicker({})和$("#checkout").datepicker({})之后。

Answer 3

您應該在日期選擇器上的第一個焦點事件之前加載數據。

這是一個例子：

朋克

$( 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));
                         });

    }
});