Pronunciation / adjective
Bringing something good and unforseen.
    Skip Navigation Links > Tech Blog
   

Use jQuery with ASP.NET Ajax Update Panels



 

  7/20/2010 10:03:02 AM

Use jQuery with ASP.NET Ajax Update Panels

Permalink

When using jquery on a control that has been placed into an update panel the jQuery will function fine on the first page load.

But subsequent refreshes of the update panel will break the jQuery because the jQuery $(document).ready call won't be fired.

The fix for this is simple:

  1. Place your jQuery $(document).ready call into another javascript function and include a call to the function so it loads with the page (this script - minus the script tags of course - could also be placed into a .js file):
    1. <script type="text/javascript">
    2. function ajaxhookup() {
    3. $(document).ready(function () {
    4. //some jquery calls here
    5. });
    6. }
    7. ajaxhookup();
    8. </script>
  2. Within the page's code (where the update panel is) add the following script - this script MUST be added to the bottom of the page and not within a separate .js file:
    1. <script type="text/javascript">
    2. Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    3. function EndRequestHandler(sender, args) {
    4. if (args.get_error() == undefined) {
    5. ajaxhookup();
    6. }
    7. }
    8. </script>

The last script hooks up to a javascript event that all update panels fire upon completion of their update. Calling the top javascript function when this handler fires hooks the jQuery scripts back up on partial page post backs.

<October 2014>
SuMoTuWeThFrSa
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678


Microsoft Certified Professional   © 2014 Fortunate.  All rights reserved.
contact: justin@aboutfortunate.com