Using ASP.NET AJAX UpdatePanels and jQuery Together

Friday, March 18, 2011

There are instances when you would like to use ASP.NET AJAX UpdatePanels and jQuery together on the same page. ASP.NET AJAX’s UpdatePanel does not give you the best performance but the ease of use and direct integration with ASP.NET control often times makes it a very useful control to implement partial page loads on the ASP.NET pages. With the powerful controls of jQuery and the ease of use of the UpdatePanel sometimes it does makes sense to use these two in conjunction. Having said that, as far as possible, you should avoid using multiple JS libraries on the same page to prevent any conflicts between them.

When you use the UpdatePanel and jQuery controls in the same page, often times the jQuery controls will only work before you do any postback for the UpdatePanel. As soon as the postback results get back to the page the jQuery controls stop working. There is an easy workaround to resolve the situation using the ASP.NET AJAX’s pageLoad() function. This function is similar to the Page_Load event for the ASP.NET page. So, your jQuery’s $(document).ready should be replaced by this method.

For example, if your current jQuery looks like:

$(document).ready(function() {
   // jQuery code
 });

To make it not conflict with the UpdatePanel, change it to:

function pageLoad() {
   // jQuery code
}

Remember this pageLoad() function is part of the ASP.NET AJAX library.