Refreshing an UpdatePanel using JavaScript

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:

<script type=”text/javascript”>
function refreshUpdatePannel(param) {

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm._doPostBack(‘<%=UpdatePanel1.ClientID %>’, param);
prm.add_endRequest(refreshUpdatePanelComplete);
}

function refreshUpdatePanelComplete() {
//add code here for when the update pannel is refreshed
}
</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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s