Showing posts with label scroll. Show all posts
Showing posts with label scroll. Show all posts

Wednesday, March 28, 2012

How do I scroll to the top of a page to view a ValidationSummary if there is a validation

Hi All,

So, I'm starting a new post that is related to my initial post from approximately 7 months ago (http://forums.asp.net/t/1040392.aspx). My hope is to finally find a solution to this problem... here is the issue:

A couple of our Ajax enabled pages have a lot of form fields, thus a user has to scroll to the bottom of the page to view the Submit button. When a control's RequireFieldValidator's EnableClientScript property is set to"true", upon a validation error the page will scroll up to the ValidationSummary. This is the functionality that I desire. But, when a control's RequireFieldValidator's EnableClientScript property is set to"false", upon a validation error the page does NOT scroll up to the ValidationSummary. Why not?

Here is a quick code sample to illustrate the problem:

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="ValidationTest.aspx.cs"Inherits="Register_Playground_Shamus_ValidationTest" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Validation Test</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="asmScriptManager"EnablePartialRendering="true"runat="server"/>
<asp:UpdatePanelID="udpUpdatePanel"runat="server">
<ContentTemplate>
<asp:ValidationSummaryID="valSummary"runat="server"/>
<!-- Lots of space to induce scrolling upon a validation error. -->
<p>Scroll Down</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<asp:TextBoxID="TextBox1"runat="server"/><asp:RequiredFieldValidatorID="RequiredFieldValidator1"EnableClientScript="true"ControlToValidate="TextBox1"runat="server"ErrorMessage="* TextBox1"/><br/>
<asp:TextBoxID="TextBox2"runat="server"/><asp:RequiredFieldValidatorID="RequiredFieldValidator2"EnableClientScript="false"ControlToValidate="TextBox2"runat="server"ErrorMessage="* TextBox2"/><br/>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

And, the codebehind... 
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass Register_Playground_Shamus_ValidationTest : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) { }}

The only difference between TextBox1 and TextBox2 is their RequiredFieldValidator's EnableClientScript property (TextBox1 is true and TextBox2 is false). To reproduce the issue:

    Load the page, scroll to the bottom and click the "Button" without entering any text into the text boxes.The page will scroll to the top and you will see the validation summary (good!).Scroll back down to the bottom of the page and put some text into the first textbox. Click the "Button".The page will NOT scroll to the top (bad!).

All I want is for the page to scroll to the top in both scenarios.

Thanks,
-Shamus

So, I fixed the problem with a hack... here is the new codebehind code:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partialclass Register_Playground_Shamus_ValidationTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
Page.Validate();
if (!Page.IsValid)
{
ScriptManager.RegisterStartupScript(this,this.GetType(),"ReturnToTop","setTimeout(\"window.scrollTo(0,0)\",1);",true);
}
}
}
}

By adding a 1 millisecond timeout before calling window.scrollTo() it now works. If you remove the timeout, then when there is a validation error on Textbox2 the page will not scroll to the top. Personally, I hate hacks like this... I would still love to understand why the client vs. server-side validators behave so differently.

I hope this hack helps somebody else...

-Shamus


Yes sure, it will help for othersSmile

How Do I Reset Scroll Position Inside UpdatePanel?

Hello,

I have a UserControl inside an UpdatePanel. The UserControl contains several DIVs that I show and hide through partial postback. I want the contents of each DIV to be scrolled to the top when I show it. I have tried using the ScriptManager to set focus onto the topmost control of each DIV when I show it, but it doesn't work. I have also tried through javascript to no avail. I know this is kind of the opposite of the behavior that many folks want from AJAX, but I need it for this piece of my application. I have tried searching but all examples are page-centric, not usercontrol-centric and speak to SmartNavigation.

Any help is appreciated.

Brendan

not sure if this would help, but I found something interestingin terms of firing off some js code during a partial page update :

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

It was particularly useful for displaying a message to the user to indicate something was happening...

Good luck,

Bob


I ended up just using this in the codebehind of the ascx:

ScriptManager.RegisterStartupScript(Page,typeof(PageTemplate),"Focus","focus();",true);

And including this function in a .js file (one line for each section):

function focus() {
try { window.location.href='#IA'; } catch (err) {}
try { window.location.href='#IB'; } catch (err) {}
try { window.location.href='#IC'; } catch (err) {}
try { window.location.href='#ID'; } catch (err) {}
try { window.location.href='#IIA'; } catch (err) {}
try { window.location.href='#IIB'; } catch (err) {}
try { window.location.href='#IIC'; } catch (err) {}
}

Seems to work on all but the initial page change, which is 'good enough' for me at this stage.

Monday, March 26, 2012

How do I execute JS on page load after postback within an update panel?

I am trying to scroll the page after it loads between postbacks within an Update Panel. I used to have this work with beta 1

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<application load="onAutoScrollControlLoad" />
</components>
</page>
</script>

I am not sure how I came up with this, but it doesn't work with Beta 2 any more. Any ideas of how to implement the same functionality?

Thx
dB.

found a solution for this -http://forums.asp.net/thread/1418207.aspx

<scripttype="text/javascript">
function onAutoScrollControlLoad() { window.location.href ='#<% Response.Write(ScrollLocation); %>'; }
Sys.Application.add_load(function() { onAutoScrollControlLoad(); });
</script>