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 >
            <div >
                <img alt="" src="Loader.gif" />
            </div>
        </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

        <asp:UpdatePanel runat="server" ID="UpdatePanel_1">
            <ContentTemplate>
                <div >
                <div >
                    <div >
                        <div >   
                            <div >     
                                Gender
                            </div>
                        </div>

                        <div >  
                            <div >           
                                <asp:TextBox ID="txtGender" runat="server" Height="40px" Width="100%"></asp:TextBox>
                            </div>
                        </div>
    
                        <div >   
                            <div >                
                                <asp:CheckBox ID="chkNotKnown" runat="server" AutoPostBack="True" Text="&nbsp;&nbsp;(Not Known)" Font-Bold="False" />
                            </div>
                        </div>

                        <div >
                            <div >                
                                <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.

CodePudding user response：

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

So instead of using updatepanel id. Assign an id for div and use that.

Then code behind will be called.

HTML:

<div  id="divScroll">

JavaScript:

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

CodePudding user response：

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>

CodePudding user response：

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

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

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