What causes page repositioning or not?

Question: When I post back a page to the server and reload the same page, what causes the browser to reposition the page (vertical scrolling wise) to the same position it was in before the postback?

Example: http://www.thepropertyinvestmentshop.co.uk/About/FAQs/tabid/58/Default.aspx

Now this takes careful testing  but if you shrink your browser window height to, lets say half the page height, then scroll to the very bottom of the page, then click on the bottom question, and for me it reloads the page with the answer now displayed AND repositions the page at the bottom, where I had it before.

Can anyone explain why this happens? Because on another site I have it doesn't do the reposition and I want it to! The only difference that I can think of is that this site uses tables and the other site doesn't. But I can't imagine how that might make a difference.

Any thoughts much appreciated.
LVL 21
Dale BurrellDirectorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JamesCsslCommented:
for "204 No Content", HTTP/1.1 specifies that "the user agent SHOULD NOT change its document view" which pretty much means that it should keep its place

from: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.2.5

[quote]
The server has fulfilled the request but does not need to return an entity-body, and might want to return updated metainformation. The response MAY include new or updated metainformation in the form of entity-headers, which if present SHOULD be associated with the requested variant.

If the client is a user agent, it SHOULD NOT change its document view from that which caused the request to be sent. This response is primarily intended to allow input for actions to take place without causing a change to the user agent's active document view, although any new or updated metainformation SHOULD be applied to the document currently in the user agent's active view.

The 204 response MUST NOT include a message-body, and thus is always terminated by the first empty line after the header fields.
[/quote]
0
Dale BurrellDirectorAuthor Commented:
But in the case of a form post there is definitely content returned? The entire page is returned?
0
JamesCsslCommented:
You appear to be correct.  I'm not sure why it is doing what it is doing.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

NicksonKohCommented:
Hi,

The trick done on that page is with javascript. However, this is still not the best way to do it as there is still jumping that will cause a user to loose where he last read.

The better way is to be able to submit a form, get the request and insert the result below all without any page refreshes. How you do this is to use AJAX/hidden iframes to submit the request and get back the result. And then using some javascript you can insert a row just below current text with the return result.

Please take note it important to use  "return false" when doing a form submit as this will cause the page not to jump to the top of the page when the form is submitted.

If you need some sample codes, I am sorry to tell you that I do not some sample codes to show you.

cheers
Nickson
0
Dale BurrellDirectorAuthor Commented:
Hey Nickson - well done for spotting that... can you point me to where the JavaSCript is located and how it is called (onload somewhere?).

Cheers,
0
Dale BurrellDirectorAuthor Commented:
Hi Nickson - can you please point me to the JS that is causing the reposition on the example page please as I haven't been able to find it.

Cheers,
0
NicksonKohCommented:
The javascript on the page is too complicated for me to understand. Here's the little I understand

You can get all the html, js and css by doing File > Save As from the page.

If you look at the HTML. You will see the each link is has an id and the href actually calls the js function "__doPostBack('AnchorLinkName', '')".

E.g.

<a class=SubHead
                              id=dnn_ctr378_FAQs_lstFAQs__ctl4_Q
                              href="javascript:__doPostBack('dnn$ctr378$FAQs$lstFAQs$_ctl4$Q','')"><span
                              style="BORDER-TOP-WIDTH: 1pt; PADDING-RIGHT: 0cm; PADDING-LEFT: 0cm; BORDER-LEFT-WIDTH: 1pt; FONT-SIZE: 8.5pt; BORDER-LEFT-COLOR: windowtext; BORDER-BOTTOM-WIDTH: 1pt; BORDER-BOTTOM-COLOR: windowtext; PADDING-BOTTOM: 0cm; BORDER-TOP-COLOR: windowtext; PADDING-TOP: 0cm; FONT-FAMILY: Tahoma; BORDER-RIGHT-WIDTH: 1pt; BORDER-RIGHT-COLOR: windowtext; mso-fareast-font-family: 'Times New Roman'; mso-ansi-language: EN-GB; mso-fareast-language: EN-GB; mso-bidi-language: AR-SA; mso-border-alt: none windowtext 0cm"><strong>Where
                              is the best place to buy?</strong></span><span
                              style="FONT-SIZE: 12pt; FONT-FAMILY: Tahoma; mso-fareast-font-family: 'Times New Roman'; mso-ansi-language: EN-GB; mso-fareast-language: EN-GB; mso-bidi-language: AR-SA">
                              </span></a>

Now this part, I believe is just to get the FAQ answer and insert it below the page and doesn't do the repositioning.

The repositioning seems to be done in the below function in dnncore.js

function __dnn_Page_OnLoad()
{
      if (__dnn_ClientAPIEnabled())
      {
            var sLoadHandlers = dnn.getVar('__dnn_pageload');
            if (sLoadHandlers != null)
                  eval(sLoadHandlers);
            
            dnn.dom.attachEvent(window, 'onscroll', __dnn_bodyscroll);
      }
      __dnn_m_bPageLoaded = true;
}

That's as much as I can understand.

cheers
Nickson
0
NicksonKohCommented:
Here's the function that is called by __dnn_Page_OnLoad() for the repositioning.

function __dnn_bodyscroll()
{
      var oF=document.forms[0];      
      if (__dnn_ClientAPIEnabled() && __dnn_m_bPageLoaded)
            oF.ScrollTop.value=document.documentElement.scrollTop ? document.documentElement.scrollTop : dnn.dom.getByTagName("body")[0].scrollTop;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dale BurrellDirectorAuthor Commented:
0
Michel PlungjanIT ExpertCommented:
Change
href="javascript:__doPostBack('dnn$ctr378$FAQs$lstFAQs$_ctl4$Q','')"

to

href="#"
onClick="__doPostBack('dnn$ctr378$FAQs$lstFAQs$_ctl4$Q',''); return false"

Michel
0
Dale BurrellDirectorAuthor Commented:
I don't have any access to the JavaScript as this is all within DotNetNuke - its just weird that using the same software works on one site and not another. I was wondering if it was something to do with the HTML/CSS of the template?
0
Michel PlungjanIT ExpertCommented:
The href you use reloads the page. If you cannot change it, I suggest you contact the makers
0
Dale BurrellDirectorAuthor Commented:
I really don't think that is the problem because as I indicated it works perfectly on the site above but not on another site I am developing - both using the same software,
0
Michel PlungjanIT ExpertCommented:
I see.

I cannot tell you. Too many things going on

the problem lies in the page you see when you click and not the page you see when you load the site.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.