• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2345
  • Last Modified:

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

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.




1 Solution
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'
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.
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.

edbrinkmAuthor Commented:
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.
edbrinkmAuthor Commented:
The problem is fixed.  The panel does not lose scroll position during data entry and validation.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now