Monday, December 13, 2010

jQuery in ASP.NET Ajax does not work after partial postback

I encountered a problem with jquery in asp.net ajax with master page content. During first pageload, the jquery script works fine, but after partial postback, the jquery script does not work.

After a few googling activity, I came upon this site:
http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/


This explains how to use document.ready, pageload, and Application.init. In my previous code, i've used document.ready since my aspx page was not ajax enabled. But since, Im switching my application to ajax ready, the solution I came upon was using function pageLoad() instead of document.ready().
Example:
1
2
3
4
5
6
7
function Pageload() {
    $("#txtsomething").blur(function() {
        //your js code here  
        var x = 25 + 25;
        alert(x);
    });
}

Hope this insight will help other developers out there...

Here is the summary from the direct link:

$(document).ready()
  • Ideal for onetime initialization.
  • Optimization black magic; may run slightly earlier than pageLoad().
  • Does not re-attach functionality to elements affected by partial postbacks.

pageLoad()

  • Unsuitable for onetime initialization if used with UpdatePanels.
  • Slightly less optimized in some browsers, but consistent.
  • Perfect for re-attaching functionality to elements within UpdatePanels.

Application.Init

  • Useful for onetime initialization if only ASP.NET AJAX is available.
  • More work required to wire the event up.
  • Exposes you to the “sys is undefined” error if you aren’t careful.

0 comments:

Post a Comment