Solved

What causes page repositioning or not?

Posted on 2007-03-21
15
356 Views
Last Modified: 2008-01-09
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.
0
Comment
Question by:Dale Burrell
  • 6
  • 3
  • 3
  • +1
15 Comments
 
LVL 11

Expert Comment

by:JamesCssl
ID: 18768550
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
 
LVL 21

Author Comment

by:Dale Burrell
ID: 18768601
But in the case of a form post there is definitely content returned? The entire page is returned?
0
 
LVL 11

Expert Comment

by:JamesCssl
ID: 18769111
You appear to be correct.  I'm not sure why it is doing what it is doing.
0
 
LVL 17

Expert Comment

by:NicksonKoh
ID: 18769458
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
 
LVL 21

Author Comment

by:Dale Burrell
ID: 18769817
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
 
LVL 21

Author Comment

by:Dale Burrell
ID: 18872073
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
 
LVL 17

Expert Comment

by:NicksonKoh
ID: 18874200
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 17

Accepted Solution

by:
NicksonKoh earned 250 total points
ID: 18874211
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
 
LVL 21

Author Comment

by:Dale Burrell
ID: 18874287
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19347823
Change
href="javascript:__doPostBack('dnn$ctr378$FAQs$lstFAQs$_ctl4$Q','')"

to

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

Michel
0
 
LVL 21

Author Comment

by:Dale Burrell
ID: 19349126
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19383161
The href you use reloads the page. If you cannot change it, I suggest you contact the makers
0
 
LVL 21

Author Comment

by:Dale Burrell
ID: 19384671
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19387434
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

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

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

708 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

19 Experts available now in Live!

Get 1:1 Help Now