Setting jQuery after ASP.net AJAX partial post back

Posted by Steve Clements on Geeks with Blogs See other posts from Geeks with Blogs or by Steve Clements
Published on Mon, 07 Feb 2011 14:26:40 GMT Indexed on 2011/02/07 15:26 UTC
Read the original article Hit count: 321

Filed under:

OK, so for some reason you have a mega mashup solution with ASP.net AJAX, jQuery and web forms.

Perhaps you are just on the migration from AjaxControlToolkit to the jQuery UI framework – who knows!!

Anyway, the problem is that when you post back with something like an UpdatePanel, you will find that your nicely setup jQuery stuff, like the datepicker for example will no longer work.

You may have something like this…

 $(document).ready(function () {
    $(".date-edit").datepicker({ dateFormat: "dd/mm/yy", firstDay: 1, showOtherMonths: true, selectOtherMonths: true });
});
 

When you’re ASP.net UpdatePanel post back, you will find that your datepicker has gone. Bugger!

Well you need to add this little gem to set it back up again once the UpdatePanel comes back to the page.

 var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
    $(".date-edit").datepicker({ dateFormat: "dd/mm/yy", firstDay: 1, showOtherMonths: true, selectOtherMonths: true });
});
 

Or like me, you would have a javascript function, something like InitPage(); do all your work in there and call that on document.ready and endRequest.

Your choice…you have the power Smile