locked
Need help with maintaining ‘Scroll Position after Asynchronous Postback’ using AJAX RRS feed

  • Question

  • User426001450 posted

    I am trying to maintain the ‘Scroll Position after Asynchronous Postback’ with the following piece of code

    <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('scrollDiv').scrollLeft;
            yPos = $get('scrollDiv').scrollTop;
        }
        function EndRequestHandler(sender, args) {
            $get('scrollDiv').scrollLeft = xPos;
            $get('scrollDiv').scrollTop = yPos;
        }
    </script>

    I got this code from this link: http://weblogs.asp.net/andrewfrederick/maintain-scroll-position-after-asynchronous-postback

    I practically have tried everything but the code is still no working. To my surprise it is working for many people according to the link. What is it that I am doing wrong? I do have master page. Does it works with master pages? I am assuming that the ‘scrollDiv’ in the code is the ID of an Div element in the page. So, I may change it to a label, div, panel, or any other control ID. Am I right?

    Please help. Thanks

    Friday, November 7, 2014 1:29 PM

Answers

  • User426001450 posted

    This is completely weird. For some reason I can not implement your code. First of all I am having trouble including this part into my page :

    onclick="fnAddElement();

    Secondly, I said weird, because after I removed this simple line from my code "NonProfitActivityDropDownList.Focus()" , it is working fine. I can not focus the visitor to the place that I would like to, but at least is not moving at all. Anyway, thanks for your help.   

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 25, 2014 5:55 PM

All replies

  • User281315223 posted

    The code looks right, are you receiving any errors within the Console in your browser? You can use the Developer Tools (F12) to look into this and see if any messages relating to it might be present.

    If that isn't the case, you might also try debugging the code by either using the Javascript debugger; keyword (along with the F12 Developer Tools mentioned earlier) :

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

    Or simply use an alert to see if your values are being set properly as well.

    Friday, November 7, 2014 4:02 PM
  • User426001450 posted

    Hello Rion. Well, I am not receiving any error at all, the page is running well as always. The only problem is that it can not keep the scroll position after the panel update. So, I do not know what to do here. You did not mention anything about the 'scrollDiv' in the code. What should I do with that ? Thanks

    Friday, November 7, 2014 5:17 PM
  • User281315223 posted

    I'm not terribly familiar with the 'scrollDiv' method. I generally have always used either the scrollTop() and scrollLeft() functions using jQuery :

    <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 = $('scrollDiv').scrollLeft();
            yPos = $('scrollDiv').scrollTop();
        }
        function EndRequestHandler(sender, args) {
            $('#scrollDiv').scrollLeft(xPos);
            $('#scrollDiv').scrollTop(yPos);
        }
    </script>

    Did you try using the debugger or an alert to see if your xPos and yPos values were being set correctly? You could also try using the window.scrollTo(x,y) functions available as well :

    function EndRequestHandler(sender, args) {
            window.scrollTo(xPos,yPos);
    }
    Saturday, November 8, 2014 7:39 AM
  • User426001450 posted

    I copy and paste your 'function' and is not working with this code. I placed the 'alert' before the function and the function is no passing any values at all. It reads values 'undefined'. So I do not know what to do with this code. Another thing that I did and according to this link:

    http://weblogs.asp.net/andrewfrederick/maintain-scroll-position-after-asynchronous-postback

    is that I framed the panel to update into <div id="scrollDiv" > giving the Div an ID as the code reads 'scrollDiv. If you take a look at this other link:  http://stackoverflow.com/questions/6583501/maintain-scroll-position-after-async-postback-from-update-panel

    it reads like this "Place the following script after the ScriptManager on your page and replace scrolldiv with your id'.  I did this as well and nothing works.

    Thanks

    Saturday, November 8, 2014 8:59 AM
  • User426001450 posted

    I have been waiting for an answer for several days. Can anybody out there help? Thanks

    Tuesday, November 11, 2014 11:45 AM
  • User555306248 posted

    Put the following line in your web.Config.

    <pages maintainScrollPositionOnPostBack="true">

    http://forums.asp.net/t/1613485.aspx?How+to+keep+whole+page+scroll+position+after+asynchronous+postback

    Wednesday, November 12, 2014 10:36 PM
  • User-413441252 posted
    <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 = $('scrollDiv').scrollLeft();
            yPos = $('scrollDiv').scrollTop();
        }
        function EndRequestHandler(sender, args) {
            $('#scrollDiv').scrollLeft(xPos);
            $('#scrollDiv').scrollTop(yPos);
        }
    </script>

    I see difference in the way scrollLeft and scrollTop position is obtained. One using with $('#') and the other not. I believe even in the first place (underlined code) you should use $('#').

    Wednesday, November 12, 2014 10:42 PM
  • User426001450 posted

    Hello Praveen

    I still having a hard time with this. I tried your code but it is not working on my page. I do have one question. The part that read like: $('#scrollDiv').scrollTop(yPos);  What in the world is 'scrollDiv' . I'am confuse with this. Is that a reserve word for the coding or what? In my understanding it is the element ID, no? So, if want to get the xPos for a control that look like this: <asp:TextBox ID="CityTownEnteredInCookieTextBox" runat="server" style="display: none"></asp:TextBox>

    I should have something like :  xPos = $('CityTownEnteredInCookieTextBox').scrollLeft();

    Please let me know if I am right.

    Thanks

    Thursday, November 13, 2014 12:11 PM
  • User-413441252 posted

    # in jQuery refers to the Id of the element. In your case if you want to get an element with Id="CityTownEnteredInCookieTextBox" in jQuery, use $('#CityTownEnteredInCookieTextBox')

    Thursday, November 13, 2014 10:30 PM
  • User426001450 posted

    I tried everything, each one of your suggestions and nothing work !!!! 

    Friday, November 14, 2014 11:27 AM
  • User-413441252 posted

    Can you send the sample code, so that I can take a look?

    Monday, November 17, 2014 11:12 PM
  • User426001450 posted

    Can you send the sample code, so that I can take a look?

    OK Praveen, no problem. Thanks for your help. Here is the code.

    <%@ Page Language="VB" MasterPageFile="~/Master Pages/MainMasterPage.master" Title="Untitled Page" %>
    
    <script runat="server">
        
        
        
    </script>
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
       
        <asp:ScriptManager ID="GeneralScriptManager" runat="server"  >
        </asp:ScriptManager>
        
        <script language="javascript" 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 = $('scrollDiv').scrollLeft();
                yPos = $('scrollDiv').scrollTop();
            }
            function EndRequestHandler(sender, args) {
                $('#scrollDiv').scrollLeft(xPos);
                $('#scrollDiv').scrollTop(yPos);
            }
         </script>
    
    
    
    
       
    
       <a name="ForceScrollToPositionOnNonProfitClassifieds">
       <asp:Label ID="ClassifiedsNonProfitLabel" runat="server" Font-Bold="True" Text="Classifieds on behalf of non-profits through donations links." ></asp:Label>
       </a>
       
       
        <asp:Label ID="CountryEnteredLabel" runat="server" Text="Country in cookie:" style="display: none"></asp:Label>
        <asp:TextBox ID="CountryEnteredInCookieTextBox" runat="server" style="display: none"></asp:TextBox>
       
        <asp:Label ID="StateEnteredLabel" runat="server" Text="State in cookie:" style="display: none"></asp:Label>
        <asp:TextBox ID="StateEnteredInCookieTextBox" runat="server" style="display: none"></asp:TextBox>
       
        <asp:Label ID="CityTownEnteredLabel" runat="server" Text="CityTown in cookie:" style="display: none"></asp:Label>
        <asp:TextBox ID="CityTownEnteredInCookieTextBox" runat="server" style="display: none"></asp:TextBox>
    
        
       <asp:Panel ID="NonProfitLocationNoticePanel" runat="server" >
          To list or search nonprofit classifieds donations links, you must enter the country, 
          state and city where you want to search or list. To enter a location click <a href="MemberService/SelectLocation.aspx">here</a>
       </asp:Panel>
            
      
        <asp:Panel ID="NonProfitAndActivityPanel"  runat="server" >
        
        
    
    
    
         <!-- This part is for the NonProfit AJAX -->
          <asp:UpdatePanel ID="NonProfitUpdatePanel" runat="server" UpdateMode="Always" >
          <ContentTemplate>
       
    
       
    
    
            <asp:Panel ID="CommentPanel" runat="server" ForeColor="#00693E" >
             The following non-profits donations links or classifieds were found at your present location. To change location, click
               <a href="MemberService/SelectLocation.aspx">here</a>.
            </asp:Panel>
        
        <br />        
    
    
    
        <div id="scrollDiv"   >
    
    
    
        <asp:Label ID="SelectNonProfitLabel" runat="server" 
        Text="Select non-profit donation link / zip code" 
        AssociatedControlID="SelectNonProfitDropDownList"></asp:Label><br />
        
    
        <asp:DropDownList ID="SelectNonProfitDropDownList" runat="server" 
        DataSourceID="NonProfitNamesSqlDataSource" DataTextField="TName" 
        DataValueField="TName"  
        AutoPostBack="True"  Width="200px" >
        </asp:DropDownList><br />
    
         <asp:SqlDataSource ID="NonProfitNamesSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:MainWebConnection %>"
            SelectCommand="SELECT [TName] FROM [NonProfitInformation] WHERE (([TCountry] = @TCountry) AND ([TState] = @TState) AND ([TCity] = @TCity) AND ([TApplicationStatus] <> 'Pending approval')) ORDER BY [TName]"
            
            EnableCaching="true"
            SqlCacheDependency="bGlocalDatabase:NonProfitInformation"
                
            >
    
            <SelectParameters>
                <asp:ControlParameter ControlID="CountryEnteredInCookieTextBox" Name="TCountry" PropertyName="Text"
                    Type="String" />
                <asp:ControlParameter ControlID="StateEnteredInCookieTextBox" Name="TState" PropertyName="Text"
                    Type="String" />
                <asp:ControlParameter ControlID="CityTownEnteredInCookieTextBox" Name="TCity" PropertyName="Text"
                    Type="String" />
             </SelectParameters>
        </asp:SqlDataSource>   
        
    
        <br />
        
        <asp:Label ID="NonProfitActivityLabel" runat="server" 
        AssociatedControlID="NonProfitActivityDropDownList"
        Text="Select your activity">
        </asp:Label>
            <table style="width: 50%">
                <tr>
                    <td style="width: 93px">
                        <asp:DropDownList Width="200px" ID="NonProfitActivityDropDownList" runat="server" 
                            AutoPostBack="True" DataSourceID="ddlNonProfitActivitySqlDataSource" 
                            DataTextField="Activity" DataValueField="InverseActivity" 
                            >
                        </asp:DropDownList>
                    </td>
                    <td style="width: 163px">
                        <asp:Button ID="NonProfitSubmitButton" runat="server" 
                             Text="Go" />
                    </td>
                </tr>
            </table>
        
    
    
         <!--The following Select Command statement is empty because it comes from the code behind --> 
    
        <asp:SqlDataSource ID="ddlNonProfitActivitySqlDataSource" runat="server" 
        ConnectionString="<%$ ConnectionStrings:MainWebConnection %>"
        SelectCommand=" "
        EnableCaching="true"
        CacheDuration="Infinite" >
        </asp:SqlDataSource>
    
       
        <asp:Label ID="KindOfSearch" runat="server" Text="Kind of search:" style="display: none"></asp:Label>
        <asp:DropDownList 
                    ID="ddlNonProfitKindOfSearch" 
                    runat="server" 
                    DataSourceID="SqlDataSourceKindOfSearch2" 
                    DataTextField="KindOfSearch" 
                    DataValueField="KindOfSearch"
                    style="display: none">
        </asp:DropDownList>
        
         <asp:SqlDataSource ID="SqlDataSourceKindOfSearch2" runat="server" ConnectionString="<%$ ConnectionStrings:MainWebConnection %>"
            SelectCommand="SELECT [KindOfSearch] FROM [ddlNonProfitActivity] WHERE ([InverseActivity] = @InverseActivity)"
            
            EnableCaching="true"
            CacheDuration="Infinite"
            >
            <SelectParameters>
                <asp:ControlParameter ControlID="NonProfitActivityDropDownList" Name="InverseActivity"
                    PropertyName="SelectedValue" Type="String" />
            </SelectParameters>
        </asp:SqlDataSource>
    
       
       
       </div>
    
    
    
    
       
         <!-- This part closed the nonprofit AJAX update panel-->
            </ContentTemplate>
            </asp:UpdatePanel>
    
    
    
    
        <asp:LinkButton ID="ShortListNonprofitActivityMenuButton" runat="server" >Less options</asp:LinkButton>
        <asp:LinkButton ID="LongListNonprofitActivityMenuButton" runat="server"  >More options</asp:LinkButton>
        <br /><br />   
        
    
        </asp:Panel>
       
    
            
         <asp:Label ID="LabelNonProfitSubmitButton" runat="server" Text="You must select a non-profit and an activity to search." AssociatedControlID="NonProfitSubmitButton" 
        Font-Bold="false" ForeColor="Red" Visible="false" >
        </asp:Label>
        
        
        <asp:Panel ID="NonProfitSearchDisplayPanel" runat="server" >
            <asp:Label ID="NonProfitSearchDisplayLabel" runat="server" 
            ForeColor="Red" Text="There isn't any non-profit classifieds donation link at your present location."></asp:Label>
            <br />
            <asp:Label ID="NonProfitSearchDisplayLabel2" runat="server" Text="Check the entered location and the spelling at the top of this page. You may suggest a donation link "></asp:Label><a href="Classifieds/NonProfitAskWebMasterPermForm.aspx">here</a>.
            <asp:Label ID="NonProfitSearchDisplayLabel3" runat="server" Text=" To change location click "></asp:Label><a href="MemberService/SelectLocation.aspx">here</a>.
        </asp:Panel>
    
    
    </asp:Content>
    
    

    Wednesday, November 19, 2014 11:30 PM
  • User-413441252 posted

    Try the below code, i adds some elements to the bottom of the div and keeps the position same. As said earlier you have to use $('#scrollDiv') in BeginRequestHandler to get to the element in jQuery. I see you are still using it as $('scrollDiv'). Hope this helps 

    <html>
        <head>
            <script src="jquery.min.js"></script>
            <script language="javascript" type="text/javascript">
            var xPos = 0; 
            var yPos = 0;
            function BeginRequestHandler() {
                xPos = $('#scrollDiv').scrollLeft();
                yPos = $('#scrollDiv').scrollTop();
            }
            function EndRequestHandler() {
                $('#scrollDiv').scrollLeft(xPos);
                $('#scrollDiv').scrollTop(yPos);
            }
            function fnAddElement()
            {
                BeginRequestHandler();
                $('#scrollDiv').html($('#scrollDiv').html() + 'mnop</br>mnop</br>mnop</br>mnop</br>' )
                EndRequestHandler();
            }
            </script>
        </head>
        <body>
            <form>
            <div id="scrollDiv" style="width: 150px;height: 150px;overflow: scroll;">
                abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>
                abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>
                abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>
                abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>
                abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>abcdef </br>
            </div>
            <input type="button" value="Add some text to div" onclick="fnAddElement();" />
            
            
            </form>
        </body>
    </html>
        
    

    Thursday, November 20, 2014 10:38 PM
  • User426001450 posted

    This is completely weird. For some reason I can not implement your code. First of all I am having trouble including this part into my page :

    onclick="fnAddElement();

    Secondly, I said weird, because after I removed this simple line from my code "NonProfitActivityDropDownList.Focus()" , it is working fine. I can not focus the visitor to the place that I would like to, but at least is not moving at all. Anyway, thanks for your help.   

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 25, 2014 5:55 PM