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


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 2015>

Microsoft Certified Professional   © 2015 Fortunate.  All rights reserved.