Supported by

 

UpdatePanel is the powerful utility in Microsoft Asp.net family for asynchronous posback. JQuery is the popular framework to facilitate coding in the client end. When the two work together, issues occur.

We normally code with JQuery plugin similar to the code below.

But if the code is in as UpdatePanel, as the following structure, the issue will happen.

You will find the JQuery Plugin only works when the page is first loaded. The JQuery Plugin disappears immediately when any asynchronous postback occurs.

It is because that $(document).ready(…) only work when the whole document of the page is loaded. When the content is partially loaded by the asynchronous postback, it doesn’t work. So the JQuery Plugin is not applied to the elements.

To address the issue, we would ask ScriptManager for help. The ScriptManager has the following events in client end.

PageRequestManager.beginRequest	before the asynchronous postback happen
PageRequestManager.pageLoading	after the beginRequest but before the content in the UpdatePanel is updated
PageRequestManager.pageLoaded	after the document in the page is loaded and after the content in the UpdatePanel is updated

So we replace the $(document).ready(…) with the following code.

 

Then the UpdatePanel and JQuery Plugin work together.

 

Supported by