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.