Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

What causes page repositioning or not?

Posted on 2007-03-21
15
Medium Priority
?
364 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
[X]
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
  • 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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 
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
 
LVL 17

Accepted Solution

by:
NicksonKoh earned 750 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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