What could be causing my concentration to be so off?

Question

What could be causing my concentration to be so off?

When I load the data.json file after focusing, my datepicker does not show up. This puzzles me because it appears on the second focus attempt. Where could I be going wrong?

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) {
      


        // The rest of the code remains unchanged Unfortunately, I couldn't include my JSON data in this snippet, so please refer to the Plunker demo for a working example.

.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: You can also check out the Plunker demo here.

javascript jquery html css

Answer 1

Answer №1

$.getJSON has a handy done() function that allows you to execute your code after the data has been loaded. You can manually activate the datepicker within this function.

To see it in action, check out this modified version

Answer 2

$.getJSON has a handy done() function that allows you to execute your code after the data has been loaded. You can manually activate the datepicker within this function.

To see it in action, check out this modified version

Answer 3

Answer №2

One reason for this behavior is that, initially, the datepickers are applied to the elements but not triggered. It's important to distinguish between binding an event and triggering it. Upon first focus, the datepicker is applied but not triggered because it hasn't been bound to the element yet. However, on subsequent focuses, the datepicker will be triggered and open since it is already bound.

To solve this issue, you can try adding

$("#checkin").datepicker('show');

and

$("#checkout").datepicker('show');

after the initialization of the datepickers using $("#checkin").datepicker({}) and $("#checkout").datepicker({}), respectively.

Answer 4

One reason for this behavior is that, initially, the datepickers are applied to the elements but not triggered. It's important to distinguish between binding an event and triggering it. Upon first focus, the datepicker is applied but not triggered because it hasn't been bound to the element yet. However, on subsequent focuses, the datepicker will be triggered and open since it is already bound.

To solve this issue, you can try adding

$("#checkin").datepicker('show');

and

$("#checkout").datepicker('show');

after the initialization of the datepickers using $("#checkin").datepicker({}) and $("#checkout").datepicker({}), respectively.

Answer 5

Answer №3

Prior to triggering the initial focus event on your datepickers, ensure that you load your data.

Check out an example here:

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 = [];

                 // no modifications were made 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));
                         });

    }
});

Answer 6

Prior to triggering the initial focus event on your datepickers, ensure that you load your data.

Check out an example here:

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 = [];

                 // no modifications were made 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));
                         });

    }
});

What could be causing my concentration to be so off?

Answer №1

Answer №2

Answer №3

Similar questions

The hamburger menu is not functioning properly online, but it works perfectly in xampp/localhost

Extracting Key from JSON Response Utilizing CakePHP for JQGrid Column Summarization

Unable to transfer object from Angular service to controller

Tips for avoiding anti-aliasing of bitmap font on Internet Explorer and Firefox

Chrome does not support gradient, while Firefox does

The error message indicates that xxx does not function as a constructor

Can the swipe navigation feature be disabled on mobile browsers?

The Mongoose function findbyIdAndRemove is currently not working properly when triggered on the client-side

Stagnant updates in component's styling

Create a small circle in the bottom left corner with a constrained size

The fetch API is being restricted, however, AJAX and XHR are still operational

Issue with Bootstrap datetime picker not adhering to step size

JavaScript does not support the enumeration of programs

Node.js in action with XmlHttpRequest

Undefined value for req.query in Node.js Express

What is the best way to handle a struct coming from a cfc in jQuery?

Hide the drawer when a user clicks on a currently selected tab

Guide to retrieving JSON key and value using AJAX

generate distinct identifier for django feedback form

Transfer dropzone files exclusively upon pressing a button