Run Jquery Function after load complete of update panal

Share the joy
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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):
     <script type="text/javascript">
     function ajaxhookup() {
     $(document).ready(function () {
     //some jquery calls here
     });
     }
     ajaxhookup();
     </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:
     <script type="text/javascript">
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
     function EndRequestHandler(sender, args) {
     if (args.get_error() == undefined) {
     ajaxhookup();
     }
     }
     </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.


Share the joy
  •  
  •  
  •  
  •  
  •  
  •  
  •  

One thought on “Run Jquery Function after load complete of update panal

Leave a Reply to SutoCom Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.