javascript - Strange behaviour in jQuery datePicker -

ok, strange , i'm quite amazed. wonder if knows if intended behaviour or bug.

on asp.net mvc app use jquery client events. have several datepickers try override standard day color patterns on click events playing onselect attribute on datepicker object.

basically, on onselect use ajax calls ask server days want show on determinate color , change them (usually after adding clicked day list of "marked" days).

my code don't seem overriding default behaviour (when click on day days standard color , day clicked in highlighted), instead seems execute after (thus redrawing states , colors on datepicker desire).

what i've found surprise me if use $.ajax call server, code executes before "default behaviour" showing standard color pattern, if use $.post code executes after "default behaviour" overriding standard color pattern.

here's code example:

$("#diasnolectivosholder").datepicker({      mindate: arraynolaborables[0],      maxdate: arraynolaborables[1],     onselect: function (fecha, calendar, event) {         $.post($.url("grupos/dianolaborable/" + $("#idgrupo").val() + "/" + fecha.replace(/\//g, ".")), function (xmlresponse) {             if (xmlresponse)                 $.post($.url("grupos/obtenerdiasnolaborables/" + $("#idgrupo").val()), function (xmldias) {                     marcarnolaborables(xmldias);                 });             $("#fechainicio").change();             return false;         });         return false;     },     onchangemonthyear: function () {         $.post($.url("grupos/obtenerdiasnolaborables/" + $("#idgrupo").val()), function (xmlresponse) { marcarnolaborables(xmlresponse); });     } }); 

on example, calendar flickers briefly standard color pattern after click on day , finishes showing color pattern marcarnolaborables(xmldias); method defines.

on contrary, if use:

$("#diasnolectivosholder").datepicker({      mindate: arraynolaborables[0],      maxdate: arraynolaborables[1],     onselect: function (fecha, calendar, event) {         $.ajax({              async: false,             cache: false,             url: $.url("grupos/dianolaborable/" + $("#idgrupo").val() + "/" + fecha.replace(/\//g, ".")),             success: function (xmlresponse) {                 if (xmlresponse)                     $.ajax({                          async: false,                         cache: false,                         url: $.url("grupos/obtenerdiasnolaborables/" + $("#idgrupo").val()),                         success: function (xmldias) {                             marcarnolaborables(xmldias);                         }                     });                 $("#fechainicio").change();                 return false;             }         });         return false;     },     onchangemonthyear: function () {         $.post($.url("grupos/obtenerdiasnolaborables/" + $("#idgrupo").val()), function (xmlresponse) { marcarnolaborables(xmlresponse); });     } }); 

the datepicker, after click on day, finishes drawing "standard color pattern", if step on code execution can see modified color pattern applies, on finishing code, standar pattern applies.

so question is... knows why use of $.ajax or $.post affects on moment when code executed respect "default datepicker behaviour"?

feel free ask that's not clear on explanation. english not mother language , find difficult explain complex situations this.

thank all.

the reason code executed @ different points in script because of setting "async" option.

by default, "async" option set true, meaning code execution not blocked while xhr made. wanted behaviour, not want ui thread blocked while script makes call server more data.

setting "async" option false changes behaviour script pauses until response server made.

i'm unsure end goal of script is, cannot make recommendation should doing. should know $.post method shorthand $.ajax method follow options:

$.ajax({   type: "post",   url: url,   data: data,   success: success,   datatype: datatype }); 

so if blocking behaviour of sync absolutely needed (not recommended) "post" type ajax request same options passed $.ajax.

hope helps.