Refreshing an UpdatePanel using JavaScript

30 August 2009

Update panels provide a really easy way to add partial page refresh's to a web page in order to give a more user friendly experience that's more like a common desktop App. By default a button within that update panel will cause a post back and so long as no elements outside of the update panel are affected in the post back only it will refresh. However what do you do if you need to refresh a panel based on something outside of the update panel. One option is just to place a hidden button within the Update Panel and trigger that to post back, however this appears a little hacky. The solution is to use JavaScript and the _doPostBack method.

The following bit of code is all you really need:

1<script type="text/javascript">
2function refreshUpdatePannel(param) {
3var prm = Sys.WebForms.PageRequestManager.getInstance();
4prm._doPostBack('<%=UpdatePanel1.ClientID %>', param);
5prm.add_endRequest(refreshUpdatePanelComplete);
6}
7
8
9function refreshUpdatePanelComplete() {
10//add code here for when the update pannel is refreshed
11}
12</script>

All you need to add is something to call the function.

The second parameter is optional and provides a way of passing some information back to the server to let it know what has just happened on the page.

When the update panel has finished refreshing the refreshUpdatePanelComplete function will fire so more JavaScript can be added if needed e.g. To reset whatever just happened on the page that caused the initial postback.