StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStrange behaviour in jQuery datePicker
text
Body
copied!<p>Ok, this is somewhat strange and I'm quite amazed. I wonder if anyone knows if this is an intended behaviour or some bug.</p> <p>On an ASP.NET MVC app I use jQuery for client events. I have several datepickers where I try to override the standard day color patterns on click events by playing with onSelect attribute on datepicker object.</p> <p>Basically, on onSelect I use AJAX calls to ask server for the days I want to show on a determinate color and change them (usually after adding the clicked day to the list of "marked" days).</p> <p>My code don't seem to be overriding the default behaviour (when you click on a day all days get standard color and the day you clicked in is highlighted), it instead seems to execute after it (thus redrawing states and colors on the datepicker to my desire).</p> <p>What I've found that surprise me is that if I use $.ajax to call the server, my code executes before the "default behaviour" showing the standard color pattern, but if I use $.post my code executes after the "default behaviour" overriding the standard color pattern.</p> <p>Here's some code example:</p> <pre><code>$("#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); }); } }); </code></pre> <p>On this example, the calendar flickers briefly to the standard color pattern after a click on any day and finishes showing the color pattern that my marcarNoLaborables(xmlDias); method defines.</p> <p>On the contrary, if I use:</p> <pre><code>$("#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); }); } }); </code></pre> <p>The datePicker, after the click on any day, finishes drawing the "standard color pattern", if I step on code execution I can see that my modified color pattern applies, but on finishing my code, the standar pattern applies.</p> <p>So my question is... anyone knows why the use of $.ajax or $.post affects on the moment when the code is executed respect the "default datepicker behaviour"?</p> <p>Feel free to ask anything that's not clear on my explanation. English is not my mother language and sometimes I find difficult to explain clearly complex situations like this.</p> <p>Thank you all.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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