Databases
StackOverflow2013
Postsdbo
POdatePicker onMonthChange & beforeShowDay getJSON request can't keep up if calendar month quickly clicked through
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdatePicker onMonthChange & beforeShowDay getJSON request can't keep up if calendar month quickly clicked through
    primarykey
    data
    text
    <p>I'll try and keep this short and to the point. </p> <p>I've got a <code>datePicker</code> set up that is being used for an accommodation website to set check in / check out dates. I'm using <code>beforeShowDay</code> to request an XML file that contains date availability and the rate. I've got this set up and working correctly.</p> <p>When the month is changed I have an <code>onMonthChange</code> function to re-request information for the following / previous months dates, this also works as expected, except for one important part: </p> <p><strong>The Problem:</strong> If you quickly click through the months the XML data coming back in can't keep up, so dates incorrectly show as unavailable. </p> <p><strong>I need one of the following to happen:</strong> <br></p> <ul> <li>Once the data loads the calendar refreshes to show the correct availability</li> <li>The month forward button is disabled until the data has been loaded.</li> </ul> <p><strong>What I've Tried</strong><br></p> <ul> <li>Hiding the month change button at the start of the onMonthChange function then showing it at the end - this doesn't work.</li> <li>Using <code>async:false</code> in the get function - I feel this is the solution but I can't get it work as I can't find any clear documentation on where it's meant to go.</li> </ul> <p><strong>Code:</strong></p> <pre><code> /* Date Picker */ var datepickerOptions = { dateFormat: 'yy-mm-dd', }; var checkInOptions = { showOtherMonths: false, minDate: 0, beforeShowDay: addPrice, onSelect: openCheckout, onChangeMonthYear: onMonthChange, dateFormat: 'yy-mm-dd' }; j.getJSON("/availability.php?startDate="+year+"-0"+month+"-01&amp;id="+j('#property_id').text(), { format: "json" }, function(data) { document.pricesData = data; document.firstDate = ''; j('#calendar_check_in').datepicker(checkInOptions); /* Tip Tip */ j('.ui-datepicker-calendar td').tipTip({ defaultPosition: "right" }); for (var key in document.pricesData) { var obj = document.pricesData[key]; if(obj['avail'] == 1 &amp;&amp; document.firstDate == ''){ document.firstDate = key; } } d = new Date(document.firstDate.substr(5)); d.setMonth(d.getMonth()+1); }); function addPrice(date) { calDate = new Date(date); dateString = 'date_'+calDate.getFullYear()+'-'+('0'+(calDate.getMonth()+1).toString()).substr(-2)+'-'+('0'+(calDate.getDate()).toString()).substr(-2); if(document.pricesData[dateString] != undefined){ var priceString = document.pricesData[dateString]['price']; if(document.pricesData[dateString]['avail'] == "1"){ valid = true; } else { valid = false; } }else{ var priceString = 'Price not available'; valid = false; } return [valid, '', priceString]; } function onMonthChange(year, month, inst){ /* Date Picker */ month--; j.getJSON("/availability.php?startDate="+year+"-0"+month+"-01&amp;id="+j('#property_id').text(), { format: "json" }, function(data) { document.pricesData = data; document.firstDate = ''; /* Tip Tip */ j('.ui-datepicker-calendar td').tipTip({ defaultPosition: "right" }); for (var key in document.pricesData) { var obj = document.pricesData[key]; if(obj['avail'] == 1 &amp;&amp; document.firstDate == ''){ document.firstDate = key; } } d = new Date(document.firstDate.substr(5)); d.setMonth(d.getMonth()+1); }); } </code></pre> <p>Thanks to anyone who takes the time to read this, hoping someone has some sort of solution for as it's a bit of a show stopper at the moment!</p> <p>Thank you!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCésar
    1. USgreg
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POdatePicker onMonthChange & beforeShowDay getJSON request can't keep up if calendar month quickly clicked through
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POdatePicker onMonthChange & beforeShowDay getJSON request can't keep up if calendar month quickly clicked through
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POdatePicker onMonthChange & beforeShowDay getJSON request can't keep up if calendar month quickly clicked through
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload