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.

<July 2014>
SuMoTuWeThFrSa
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789


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