Ajax Update Panel Scroll to Top Issue

I found this great post on how to force a scroll to top when you have a long page that is contained inside an UpdatePanel. For myself, I was having issues with items inside a Wizard control. Some of the pages had very long text. So when the user clicked "Next" it would move to the next page, but it would go the middle of the page (whereever the last page position was) rather than go to the top. So the user would be confused as to where they were. So I wanted the page to go to the top of the page on the Next button click. I added the following script just after my script manager:

<script type="text/javascript" language="javascript">

var postbackElement;

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded)

function beginRequest(sender, args) {

postbackElement = args.get_postBackElement();

}

function pageLoaded(sender, args) {

if (typeof (postbackElement) === "undefined") {

return;

}

if ((postbackElement.id) === "btnStepNext" || (postbackElement.id) === "btnStepPrevious") {

window.scrollTo(0, 0);

}

}

</script>

Then I set the Next and Previous button in the Wizard control to ClientIDMode="Static" so the Javascript could identify them and it worked great!

ScriptManager History UpdatePanel

I just beat my head against the wall for an entire morning trying to figure out why the simple ScriptManager History functionality was not working with my UpdatePanel.

First off, I inherited this code, so I was just working with what was there without paying much attention to it. The previous person had setup an UpdatePanel without putting in a Trigger tag. So that should have been clue NUMBER 1, but I overlooked that so that was a good two hours wasted in just not paying attention to that.

Oh well, so I kept following all the simple steps listed on the 'net for setting up the ScriptManager to keep history points. Brief overview:

1) Add a ScriptManager to the page like this:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="True" OnNavigate="MainScriptManager_Navigate" EnableSecureHistoryState="True"/>


2)Add the associated function to the code-behind :
protected void MainScriptManager_Navigate(object sender, HistoryEventArgs e)
{
    string panelName = e.State["S"];

     switch (panelName)
     {
      case "Panel_Store_CC":
      Panel_Store_CC.Visible = true;
      break;
      default:
      break;
     }
}

3) Add history points when needed in code calls (in my example it was a button click):
if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating)
 ScriptManager.GetCurrent(this).AddHistoryPoint("S", "Panel_Store_CC");


After several hours, history was not being added the browser's back in any browser (Chrome/IE/FireFox)....I began noticing during my debugging I was hitting the Page_Load code on each button click. DUH! This was not right...so I finally figured out that I needed a trigger for the updatepanel. At first I added an Asynchoronous trigger, but that still did not work HOWEVER once I added the PostBackTrigger for the button, it finally worked since the entire page was not being posted back!

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>

Sys.InvalidOperationException: Could not find UpdatePanel with ID 'xxx'

Recently, I was working on an AJAX UpdatePanel with multiple triggers. I noticed I received the following JavaScript error in IE7, but not FireFox:

'Sys.InvalidOperationException: Could not find UpdatePanel with ID 'xxx'. If it is being updated dynamically then it must be inside another UpdatePanel.'

My page was written as follows (with each trigger on its own line (to make it readable)):

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate></ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnImg1" EventName="Click" />

<asp:AsyncPostBackTrigger ControlID="btnImg2" EventName="Click" />

<asp:AsyncPostBackTrigger ControlID="btnImg3" EventName="Click" />

<asp:AsyncPostBackTrigger ControlID="btnImg4" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

I had read that adding the UpdateMode=Conditional and adding an specific EventName to each trigger would maybe resolve my problem, however, it did not, but I left it in just in case.

I had only noticed this problem in IE after I had added the fourth trigger. I also noticed if I removed the fourth trigger, there was no JavaScript error. So I then change my page to the following (put all the triggers on a single line):

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate></ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnImg1" EventName="Click" /><asp:AsyncPostBackTrigger ControlID="btnImg2" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="btnImg3" EventName="Click" /><asp:AsyncPostBackTrigger ControlID="btnImg4" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

This seemed to fix the problem, even moving it to two lines worked. So I guess it was a whitespace issue? Very strange...only in IE!

*note my content template it blank because I'm actually working with a swfobject to play a movie...so there is a lot more code here but I'm only showing the specific area that was broken...