Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 34

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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses

618 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