Monday 2 March 2009

Combining jQuery and UpdatePanels

Some of you may have noticed using Microsoft Ajax and jQuery together works fine until you do a post back in e.g. an UpdatePanel and the jQuery plugins referencing elements contained in the panel stop working. I believe these are the event handlers which are bound to the old DOM elements by jQuery.
A simple work around is to combine a bit of Microsoft AJAX with jQuery - in this example I rerun all my jQuery that would normally reside in $(document).ready after each ajax callback instead.
//Jquery document ready
$(document).ready(function(){
  RunScript();
})

//This is called after every page load by ajax
//It is used instead of the normal document ready function
function pageLoad(sender, arg) {
  if (arg.get_isPartialLoad()) {
      RunScript();
  };
}

//Main Jquery function
function RunScript() {
 //... normal jQuery code here etc

No comments: