Home » jQuery » jQuery Examples

jQuery $(document).ready and UpdatePanels

jQuery $(document).ready and UpdatePanels: In this article, we will learn how does the JavaScript and jQuery Code would work inside UpdatePanels? By Pratishtha Saxena, on July 23, 2023

Firstly, let's see briefly about $(document).ready and UpdatePanels.

$(document).ready

This is a function that allows you to execute the JavaScript and jQuery code as soon as the DOM is loaded and ready. It ensures that the JavaScript code is executed only after the complete loading of the document.

UpdatePanels

Now, this is an ASP.NET Web Framework feature. It helps to update the page partially instead of refreshing the whole document. This is a very useful feature that is widely used as it reloads the page partially. This gives an AJAX-like environment for the document to work.

How does jQuery $(document).ready work with UpdatePanels?

Now, let's understand what happens when these two features work together with each other. One issue faced when these two are aligned together is that whenever the update panel works, i.e., it loads the page, JavaScript is not fired every time. It runs only one time, that is, when the document is loaded initially. Therefore, in order to ensure that the JavaScript runs successfully as the update panel works, one can make use of 'pageLoad' function.

pageLoad is also a feature of ASP.NET Web Framework which can be used in place of $(document).ready as an alternative to use with UpdatePanel. The major difference between pageLoad and $(document).ready is that the former gets loaded when the DOM is loaded as well as when page is partially loaded every time.

function pageLoad() {
  $(document).ready(function() {
    // Your code here
  });
}

Hence, this is how we can use Update Panel and make sure that the JavaScript code has been executed with every page loading process.