Do you dislike the way that ASP.NET AJAX Update Panels update (or replace the content within the update panel)? Is it not flashy and Web 2.0 enough for you? Well fear no more! I've devised a straight-forward script to help you animate your update panel updates. This script uses jQuery (
www.jquery.com) to animate the content when an update panel updates. It can easily be modified to use another library such as
Scriptaculous. It uses javaScript to override ASP.NET AJAX's
_updatePanel method within the
PageRequestManager (the method which does the actual replacing of the content).
I've commented the script so you can understand what it's doing:
[code:js]
$(document).ready(
function() {
// SAVE the original _updatePanel function for later use.
var old_prm_updatePanel = Sys.WebForms.PageRequestManager.getInstance()._updatePanel;
// Overwrite the original method with our code which will apply animation.
// (Note: The method signature remains the same)
Sys.WebForms.PageRequestManager.getInstance()._updatePanel =
function(updatePanelElement, rendering) {
// Using jQuery to hide (animate) the element. Then use the callback function
// to load and show the new data. You don't want to update the
// data beforehand otherwise you'll see your update panel flicker.
$(updatePanelElement).hide('slow',
function() {
// Pass the old function and the args
loadShowUpdatePanel(old_prm_updatePanel, updatePanelElement, rendering);
});
}
});
function loadShowUpdatePanel(old_prm_updatePanel, updatePanelElement, rendering) {
// Call the original (old) function with context of Page Request Manager instance.
// We call the original method so ASP.NET AJAX can do all the necessary actions.
old_prm_updatePanel.apply(Sys.WebForms.PageRequestManager.getInstance(),
new Array(updatePanelElement, rendering));
// using jQuery again to show (animate) the update panel.
$(updatePanelElement).show('slow');
}
[/code]
And that's all you need. This script isn't just limited to animating the update panel update either... You can extend this script to do anything you want immediately before and after the new content is displayed. The main difference between this method and using the add_BeginRequest or add_EndRequest methods is the timing. This script will fire exactly before and after the update takes place - This would not be a good place to show a loading screen because the AJAX call has already been made, there's nothing to wait for. Whereas the BeginRequest executes before the AJAX call and EndRequest fires after the update has completed - This would be good to apply a loading screen.
