Javascript - Maintain screen position fails to load the code behind actions

Question

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="&nbsp;&nbsp;(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

https://www.c-sharpcorner.com/blogs/maintain-or-set-page-scroll-position-after-asynchronous-postback-in-asp-net-ajax

Answer 1

NOTE: In your code there are two different BeginRequestHandler function,

1. on top you are using update panel id and

function BeginRequestHandler(sender, args) {
    xPos = $get('#UpdatePanel_1').scrollLeft;
    yPos = $get('#UpdatePanel_1').scrollTop;
}

2. on bottom code you are using div class name.

function BeginRequestHandler(sender, args) {
    xPos = $get('divScroll').scrollLeft;
    yPos = $get('divScroll').scrollTop;
}

What's the Issue:

It shows the error as Cannot read properties of null (reading 'scrollLeft')

Issue Reason:

id used for variable xPos and yPos returns null.

Solution 1:

If you want to use update panel id then try this

Remove # from ID start:

$get('#UpdatePanel_1').scrollLeft;

Use it like this:

$get('UpdatePanel_1').scrollLeft;

Solution 2:

If you want to use div id then try this

Add id to your div.

HTML:

<div class="divScroll" id="divScroll">

JavaScript:

function BeginRequestHandler(sender, args) {
    xPos = $get('divScroll').scrollLeft;
    yPos = $get('divScroll').scrollTop;
}

Answer 2

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'

 <script type="text/javascript">
        var xPos, yPos;
      $( document ).ready(function() {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_beginRequest(BeginRequestHandler);
        prm.add_endRequest(EndRequestHandler);
      });
        function BeginRequestHandler(sender, args) {
            xPos = document.getElementById('divScroll').scrollLeft;
            yPos = document.getElementById('#divScroll').scrollTop;
        }
        function EndRequestHandler(sender, args) {
            document.getElementById('#divScroll').scrollLeft = xPos;
            document.getElementById('#divScroll').scrollTop = yPos;
        }
    </script>

Answer 3

Please, add the attribute ClientIdMode of your Update Panel like this:

<asp:UpdatePanel runat="server" ID="UpdatePanel_1" ClientIdMode="Static">

If you don't do this, the Asp.NET Web Forms add a dynamic suffix like as a GUID number into the ID attribute value, and your JavaScript code never recognizes the rendered HTML ID attribute value #UpdatePanel_1