Weird bug when combining an ASP.NET updatepanel with the jQuery UI DatePicker

Question

I\'ve created a page which combines an inline jQuery UI datepicker . I wan\'t to initiate a callback to the updatepanel when the user clicks a new date to update some data. Now,

Answer 1

A common problem with combinations of AJAX and jQuery is that this...

$(document).ready(function() {
       buildDatepicker();

Only happens on the first page load. If you replace the area of HTML that has been affected by buildDatapicker(); you lost any events that were attached to it (even if you've replaced it with the same elements).

All you need to do is call buildDatepicker against the newly loaded HTML... and pass in the element that has been loaded just to ensure you don't double up...

$(document).ready(function() {
       buildDatepicker(document);
...

function buildDatepicker(element) {
    var dp = $("#datepicker", element).datepicker({
        onSelect: function(dateText, inst) {
            /* Do a postback when someone clicks a date */
            doAspNetPostback();
        }
    });
}    

Now you can call buildDatepicker(myNewlyLoadedElement); to re-bind the data picker functionality.

Answer 2

I have tried your code for reproducing the error and I can reproduce the error. And I've come to the conclusion that there is some problem with jQuery/UpdatePanels.

If I replace the button with a LinkButton, you can see that the link directly calls __doPostBack(...), the exact same function with the exact same arguments that you are calling. And clicking the link button directly works, but clicking a date doesn't.

So that means that something happens inside jQuery that changes some context. But I have no idea what that would be.

Answer 3

Looks like a race condition, try UpdateMode="Conditional" and ChildrenAsTriggers="false", reference.

Answer 4

You could try using datepicker to set an altField and check that for changes to do a postback.