jQuery $(document).ready and UpdatePanels?

by

An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

What I’ve done to work around this is re-subscribe to the events I need after every update. I use $(document).ready() for the initial load, then use Microsoft’s PageRequestManager (available if you have an update panel on your page) to re-subscribe every update. 

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

The PageRequestManager is a javascript object which is automatically available if an update panel is on the page. You shouldn’t need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.

If you need more detailed control, this event passes arguments similar to how .NET events are passed arguments (sender, eventArgs) so you can see what raised the event and only re-bind if needed.

Here is the latest version of the documentation from Microsoft: msdn.microsoft.com/…/bb383810.aspx

A better option you may have, depending on your needs, is to use jQuery’s .on(). These method are more efficient than re-subscribing to DOM elements on every update. Read all of the documentation before you use this approach however, since it may or may not meet your needs. There are a lot of jQuery plugins that would be unreasonable to refactor to use .delegate() or .on(), so in those cases, you’re better off re-subscribing.

More Related Contents:

  1. Direct vs. Delegated – jQuery .on()
  2. How to distinguish between left and right mouse click with jQuery
  3. Change the selected value of a drop-down list with jQuery
  4. How to debug JavaScript / jQuery event bindings with Firebug or similar tools?
  5. Can I find events bound on an element with jQuery?
  6. How can I detect pressing Enter on the keyboard using jQuery?
  7. What is the difference between the mouseover and mouseenter events?
  8. How to fire an event on class change using jQuery?
  9. how to parse a “dd/mm/yyyy” or “dd-mm-yyyy” or “dd-mmm-yyyy” formatted date string using JavaScript or jQuery [duplicate]
  10. How to do a Jquery Callback after form submit?
  11. Best way to get all selected checkboxes VALUES in jQuery [duplicate]
  12. Accessing Asp.net controls using jquery (all options)
  13. Verify External Script Is Loaded
  14. How can I validate google reCAPTCHA v2 using javascript/jQuery?
  15. Alternative to jQuery’s .toggle() method that supports eventData?
  16. How to stop events bubbling in jQuery? [duplicate]
  17. Attaching click event to a JQuery object not yet added to the DOM [duplicate]
  18. How to stop default link click behavior with jQuery
  19. jQuery event delegation
  20. Open Select using Javascript/jQuery?
  21. Calling ASP.NET Code Behind function from JavaScript
  22. How do I handle a click anywhere in the page, even when a certain element stops the propagation?
  23. Emailing to multiple recipients with html Mailto: not working
  24. jQuery $(document).ready () fires twice
  25. Fullscreen API: Which events are fired?
  26. Bind events on dynamic created elements inserted by AJAX (check box)
  27. ASP.NET Parse DateTime result from ajax call to javascript date
  28. jQuery addClass onClick
  29. Is My Page Being Loaded from the Browser Cache?
  30. How to post ASP.NET MVC Ajax form using JavaScript rather than submit button

Leave a Comment