php - datePicker need to click twice to show the unavailable dates -

i've created code disable dates retrieved database.

within getdates script retrieve dates database, return them , assign them array unavailabledates.

<script> var unavailabledates;  function unavailable(date) {     dmy = date.getdate() + "-" + (date.getmonth() + 1) + "-" + date.getfullyear();     if ($.inarray(dmy, unavailabledates) == -1) {         return [true, ""];     } else {         return [false, "", "unavailable"];     } }  $(document).ready(function() {     $("#datepicker").datepicker({         dateformat: 'yy-mm-dd',           beforeshowday: unavailable,          mindate: 0,         firstday: 1, // rows starts on monday         changemonth: true,         changeyear: true,         showothermonths: true,         selectothermonths: true,         altfield: '#date_due',         altformat: 'yy-mm-dd'         });      $('#datepicker').focus(function(){         //alert($('#name').html());          $.ajax({                                               url: 'getdates.php',                           data: "artist_id="+$('#name').html(),                                datatype: 'json',                              success: function(data)                   {                    unavailabledates = data;         }          });     })  }); </script> 

it works fine when click in datepicker twice. when first click shows dates (no matter if available or not). when click again, shows unavailable dates.

does know why? thanks

add async: false ajax call app wait response before continuing, so

$('#datepicker').focus(function(){     //alert($('#name').html());      $.ajax({                                           url: 'getdates.php',                       data: "artist_id="+$('#name').html(),                            datatype: 'json',      async: false,                 success: function(data)               {                unavailabledates = data;     }      }); 

another thought, possibly add ajax call right unavailable function rather having 2 things run first, onfocus , beforeshowday (although i'm not terribly familiar beforeshowday function)

this may slow down opening of date picker though, have wait service depends on how fast service , performance requirements have. other options if can slow pop "getting dates" message or pull server every x seconds while page (although add lot of service calls...)

edit: after comment...

"basically when user selects option (here want book artists \ when user selects artist), unavailable dates of datepicker  updated   automatically."  

it seems loading list when artist selected make more sense, unless concerned changes while page open. in case like...

on artist changed     -disable date picker, possibly add small note next / under /         on it loading     -start ajax call async true     -in ajax success function, re-enable picker , remove message. 

this allow ui stay active, allow user enter other information while dates load, , if service fast enough, won't hardly know disabled second. dates won't quite "live" other way, doesn't sound need live. need recheck dates when form submitted anyway.