Solved

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

Posted on 2014-03-28
5
1,893 Views
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.

http://blog.brianfarnhill.com/2008/07/ajax-updatepanel-and-scrolling-div-tags-keep-scroll-position-on-post-back

http://microsoftmiles.blogspot.com/2006/11/maintaining-gridview-scroll-position-in.html

http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx

http://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/
0
Comment
Question by:edbrinkm
5 Comments
 
LVL 25

Expert Comment

by:devic
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'
0
 
LVL 33

Expert Comment

by:Slick812
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
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.

Cd&
0
 

Accepted Solution

by:
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.
0
 

Author Closing Comment

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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Angular - (very close) following an example 20 36
Test ddwrt:UserLookup 1 24
bulid json format 3 21
React or Angular? 6 8
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
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…

744 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