Using the below code to retain screen position
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('#UpdatePanel_1').scrollLeft;
yPos = $get('#UpdatePanel_1').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('#UpdatePanel_1').scrollLeft = xPos;
$get('#UpdatePanel_1').scrollTop = yPos;
}
</script>
as described in the below link
https://weblogs.asp.net/andrewfrederick/maintain-scroll-position-after-asynchronous-postback
but after using the above code my code behind actions stops working.
Any suggestion will be highly helpful.
ASPX Code
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" MaintainScrollPositionOnPostback="True" %>
<%--<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>--%>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('divScroll').scrollLeft;
yPos = $get('divScroll').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('divScroll').scrollLeft = xPos;
$get('divScroll').scrollTop = yPos;
}
</script>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel_1">
<ProgressTemplate>
<div class="modal_1">
<div class="center">
<img alt="" src="Loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="UpdatePanel_1">
<ContentTemplate>
<div class="divScroll">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="CustomDiv">
Gender
</div>
</div>
<div class="col-md-3">
<div class="CustomDiv">
<asp:TextBox ID="txtGender" runat="server" Height="40px" Width="100%"></asp:TextBox>
</div>
</div>
<div class="col-md-3">
<div class="">
<asp:CheckBox ID="chkNotKnown" runat="server" AutoPostBack="True" Text=" (Not Known)" Font-Bold="False" />
</div>
</div>
<div class="col-md-3">
<div class="cssErrorMsg">
<asp:RequiredFieldValidator ID="rfvGender" runat="server"
ControlToValidate="txtGender" ErrorMessage="Gender Required"
InitialValue="" BackColor="Yellow"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<%--<asp:PostBackTrigger ControlID = "txtGender" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
</form>
Vb.Net Code
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub chkNotKnown_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chkNotKnown.CheckedChanged
With txtGender
If chkNotKnown.Checked Then
.Text = "Not Known"
.Enabled = False
Else
.Text = ""
.Enabled = True
End If
.Focus()
End With
End Sub
End Class
I have several controls which retrieves the data from server but I just shown a simple code behind example for reference.
Commenting / Removing the above JS will let the code behind action to run. Otherwise cliking the chkNotKnown check box will not fire the event.
Feedback 1
Tried all the suggestions and still the JS code is not retaining the screen position. I wonder how it is working for others in the provided link :(.
Feedback 2
Finally I ended using the below JS
In ASPX Code Page
<script type="text/javascript">
var xPos, yPos, needScroll;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_pageLoaded(EndRequestHandler)
function BeginRequestHandler(sender, args) {
xPos = 0;
yPos = window.pageYOffset || document.documentElement.scrollTop;
}
function EndRequestHandler(sender, args) {
if (needScroll) {
window.setTimeout("window.scrollTo(" + xPos + "," + yPos + ")", 100);
}
}
</script>
In Code Behind Page Load Event
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "ScrollTo", "var needScroll = true;", True)
Source Link
3
Answers
As you mentioned that your code behind action is not working after adding JS code.
possible cause are:
1.Use js code block that execute after document ready
2.$get will not work for searching element use $("#ID") or javascript ‘document.getElementById’
NOTE: In your code there are two different BeginRequestHandler function,
on top
you are usingupdate panel id
andon bottom code
you are usingdiv class name
.What’s the Issue:
Issue Reason:
Solution 1:
If you want to use
update panel id
then try thisRemove # from ID start:
Use it like this:
Solution 2:
If you want to use
div id
then try thisAdd id to your div.
HTML:
JavaScript:
Please, add the attribute ClientIdMode of your Update Panel like this:
If you dont’t do this, the Asp.NET Web Forms add a dynamic sufix like as a GUID number into the ID attribute value, and your JavaScript code never recognizes the rendered HTML ID attribute value
#UpdatePanel_1