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

Posted on 2014-03-28
Medium Priority
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 35

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
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…

590 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