AJAX UpdatePanel and scrolling DIV tags - keep scroll position on post back

Posted on 2014-03-28
Last Modified: 2014-04-06
My web page has an update panel that does updates/postbacks for the ontextchanged event of a several text boxes.  The panel has two columns.  The left column is check boxes and the right column is text boxes.  The user can either select the check box or enter data in the text box for each row.  There are 24 rows to show 24 hours in the day.  The problem is with the postback for the ontextchanged event with the textbox.  The panel scrolls to the top with the postback due to the ontextchanged event.  The purpose of the ontextchanged event of the textbox is to disable the checkbox for that row. The panel must stop scrolling to the top on postback.

I have attempted several posted articles with no success.  I am open to ideas.  Below are the links I have tried.  The one thing I have not tried is to use async postback triggers on each text box.
Question by:edbrinkm
LVL 25

Expert Comment

ID: 39963655
I think you need prepare some example with your problem

one reason can be some js error and submitting the form as result 'scrolling to the top'
LVL 33

Expert Comment

ID: 39963931
greetings edbrinkm, , I would think that you are not correctly using the AJAX processes, You say that you update the entire "panel" with 24 checks and texts when there is a change in just ONE text-input value, You should NOT update all 48 elements, if only one or two need to be updated, if Only one check-box needs to be updated, then just change ONE thing (the check) in the Ajax sendback from server, if just two things need to be changed, then just update those TWO things, updating all 48 elements seems like overkill to me. But maybe I do not understand your ajax processes.

If this does not seem doable (specific element updates), , THEN try and place a Container DIV around the panel element, make the container DIV the element that scrolls, and then update the panel that's INSIDE the scrolled, so things inside the panel do not affect the scroll position, UNLESS the height of panel changes.
LVL 53

Expert Comment

ID: 39963936
Just add an id to the textboxes and then then you can control the position where the browser locates the page.

If the ids are something like 'textb1', 'textb2', etc

Then you set the page position with window.location.href=self.location.href+'#textb1';

That will set the scroll top to the top of the textarea with the specified id.


Accepted Solution

edbrinkm earned 0 total points
ID: 39967273
I tried setting the page position but the scroll position continued to change.  

I am only updating one row of controls not the entire form.  I did make a container DIV around the update panel.  I do not know how to maintain the scroll position.  The postback problem still exists.

I have made progress however.  I set the ChildrenAsTriggers to false on the updatepanel.  I changed the events for the checkboxes and text boxes to javascript functions.  So a postback is not required to validate the controls.  The panel keeps its location.  There is no change at all.  The validation works and the button events work successfully.  The button events cause the form to post back to the top of the form but I think the users will accept that.  

The ChildrenAsTriggers property of the update panel with a value true causes updates from immediate child controls.  

I will continue to test and see if the users will accept this solution.

Author Closing Comment

ID: 39981034
The problem is fixed.  The panel does not lose scroll position during data entry and validation.

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now