When using javascript to perform actions on each load of a page, for example by using body.onload, a problem will arise when implementing ajax updatepanels. This blog shows a possible solution for this behavior.
In this case we had a page in which we included some javascript. This script performed an action when the body.onload event occurred.
The javascript code changes some css-styles based on content.
Everything worked fine until we created an ajax updatepanel. The content for which the css-styles where updated by the javascript is within this updatepanel.
When changing the content we expected the css-style to be changed on postback but this didn't happen.
The reason is (ofcourse) the lack of a full render when using an updatepanel. Only the contents of the updatepanel is rendered and send to the browser. There is no body.onload event that takes place.
A solution for this is to execute the javascript not only on body.onload but also after each partial postback. The code to perform this is:
Code:<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler (sender, args)
{
// Put your code here
}
</script>
This script has to be put on the page after the scriptmanager code. After each partial postback the code will be executed.