jQuery document ready not firing with ajax update panels

The scenario is:

1. You’ve got an update on a page, and you have some jQuery executing a document.ready event.
2. The event isn’t firing when your update panel posts back asynchronously.

The solution is quite easy, take your original document.ready script and wrap it in a function and place it outside of your update panel (linked js file is fine):
function BindLoadEvents() { $(document).ready(function() { alert(‘fired!’); }); }

The bold text was the body of your original function.

Now, inside your update panel (preferably at the top):
<ContentTemplate>
<script type=”text/javascript”> if(typeof BindLoadEvents == ‘function’) Sys.Application.add_load(BindLoadEvents); </script>

Now, your script will execute when ajax has finished loading the page, including when new postbacks are made within your update panel!

Note that I have noticed slight flickering on the first request, to get around this, you can inline a call to BindLoadEvents(); within your <script> which sits outside of the update panel (below the BindLoadEvents function def), this will cause it to execute twice though, but the first time will be executed as the page renders, vs waiting for the page to finish loading, hence removing the slight delay.).  Let me know if there’s a nicer way to fix this glitch.

 

Advertisement