jQuery & ASP.NET UpdatePanel


Posted on Monday, November 9th, 2009 by Ryno Burger

For some reason jQuery effects / configurations are lost during a partial page postback when using the UpdatePanel.


A good example is when you’re using the jQuery Datepicker plugin. After a partial page postback the date formatting are lost and it revert back to the defaults.


Here is a quick way to work around it:


1. Hook an event to your page’s onload event. In this case I’ve attached the page’s onload event to a JavaScript function called “load”.


<body onload="load()">


2. Call the Sys.WebForms.PageRequestManager.getInstance().add_endRequest() event exposed by ASP.NET and reference the JavaScript function name (the handler method) as parameter. This event is fired when an asynchronous postback is finished and control has been passed back to the browser



//Function called one page load
function load()
{
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostAJAXRefresh);
}

3. Include all jQuery effects in the handler method referenced by add_endRequest(PostAJAXRefresh)


//all jQuery effects need to be placed here again to keep  effects after partial AJAX page postback
            function PostAJAXRefresh()
            {
                //jQuery UI - datepicker
                $(function() {
		            $("#ctl00_ContentPlaceHolder2_txtDateSent").datepicker({ dateFormat: 'm/d/yy' });
		            $("#ctl00_ContentPlaceHolder2_txtDateFrom").datepicker({ dateFormat: 'm/d/yy' });
		            $("#ctl00_ContentPlaceHolder2_txtDateTo").datepicker({ dateFormat: 'm/d/yy' });
	            });

Filed under ASP.NET, HTML, JavaScript, jQuery.

Leave a Comment


-->