Top-of-Page Button OK in XHTML, Behaves Incorrectly under MODx

98 Posts

Halfnium Reply #1, 16 years, 8 months ago

A top-of-current-page button that works properly in XHTML doesn’t work properly using MODx.

The button is part of a fluid layout that may result in quite long pages. As a convenience to the reader, I include a button in the page footer that causes the view to jump to the top of the current page. This works as intended in the original XHTML: Click the button at the bottom of index.html and the top of index.html appears in the viewport. Click the button at the bottom of child.html and the top of child.html appears.

Since the footer code is the same for every page, MODx allows me to abstract it as a Chunk and then refer to that Chunk in Templates. (I have one Template for the root Page, another for child Pages.) The Pages have no content of their own, just point at the Templates. (If I weren’t using MODx, I’d accomplish this with a PHP Include.)

I browse to the root Page of the MODx hierarchy and have a look. Then I browse to the child Page. I find that clicking that button at the bottom of the root Page causes the top of that Page to appear, as desired. However, a click on that button on a child Page also causes the top of the root Page to appear, which is not the desired behavior.

Checking the source code generated for each page shows that the footer XHTML is identical, just as expected. Therefore, I conclude that the machinery that sets the page-number argument passed in the URL is getting confused. What causes the confusion, and how do I work around it?

Here is the XHTML:

<body>
  <a name="pagetop"></a>
            .
            .
            .
            .

    <div id="footer">
      <form action="#pagetop">
        <button id="go_pagetop" type="submit">
          Jump to Top of Page
        </button>
      </form>
      <div>
        <p id="foot_blurb">
          Paid for and © Copyright 2010 by Groton Republican Town Committee<br/>
          P.O. Box 472, Groton, MA   01450
              —     Brooks T. Lyman, Treasurer
        </p>
      </div>
    </div>

  </div>
</body>

Thanks!

I looked just like that in 1964.

2,314 Posts

anonymized-26931 Reply #2, 16 years, 8 months ago

try the "Anchors Away" plugin -> http://modxcms.com/forums/index.php?topic=15753.0
or the "SelfReference" Snippet if you need to keep query variables: http://setpro.pl/software/self-reference

98 Posts

Halfnium Reply #3, 16 years, 8 months ago

Thank you. Apparently this is a well known issue, just not well known to this noob.

I had better use the SelfReference approach, which retains the query variables. I don’t want to take the expedient route now, forget the problem & solution, and then maybe have to revisit it again later.

As a noob, I also worry about two other tangential issues:

1) Will the SelfReference solution break when I move from my localhost sandbox (based on Wampserver 2.0) to my public hosting service (Host Monster)? How do I bring along plug-ins, snippets etc. not included with the base MODx distribution when I make that move?

(2) I’m jumping in with MODx using Evolution 1.0.2. (I didn’t go for Revolution because Host Monster’s SimpleScripts supports Evo 1.0.2. If Host Monster doesn’t support Revo, I don’t want to go there myself yet. I have enough of a learning curve as it is.) What must I do in order to import my Evo stuff into Revo eventually? What practices in my current Evo work will ease that transition?

Where in the Forum are these sorts of issues addressed?

Again, thanks!

I looked just like that in 1964.

98 Posts

Halfnium Reply #4, 16 years, 8 months ago

After much headbanging, I learned that the anchor tag works fine with the SelfReference snippet. However, the form/button tag combo does not. This is peculiar, since both the <a> and the <form>/<button> techniques work fine with straight XHTML under MS-Explorer (version 8.0.6001.18702) and Moz Firefox (version 3.6).

Have a look at the Chunk (which includes a few debug-print tags), then at its XHTML expansion within a child page (/?id=5). The URL in the XHTML <form> tag looks fine. When I cut & paste it into the browser, it navigates perfectly well, too. However, when I click the button, navigation always jumps to the root page (i.e., to /?id=1).

Why? Is using a button in this way impossible with MODx? Comments? Ideas? (All this fuss because I wanted a simple gray button with rounded corners that would shift the viewport to top of page!)

In case there may be some stealthy configuration issue in play here, I am using Wampserver 2.0 as distributed (Apache 2.2.11, PHP 5.3.0 and MySQL 5.1.36).

Chunk:
<div id="footer">
  <form action="[(site_url)][!SelfReference!]#pagetop">
    <button id="go_pagetop" type="submit">
      Jump to Top of Page
    </button>
  </form>
  <div>
    <a href="[(site_url)][!SelfReference!]#pagetop">Link to Page Top</a>    
    Site URL= [(site_url)]    
    Base URL= [(base_url)]    
    SelfReference= [!SelfReference!]    
    SelfReference2= [!SelfReference2!]
  </div>
</div>

XHTML:
<div id="footer">
  <form action="http://localhost/GRTC_MODx/modx-1.0.2/?id=5#pagetop">
    <button id="go_pagetop" type="submit">
      Jump to Top of Page
    </button>
  </form>
  <div>
    <a href="http://localhost/GRTC_MODx/modx-1.0.2/?id=5#pagetop">Link to Page Top</a>    
    Site URL= http://localhost/GRTC_MODx/modx-1.0.2/    
    Base URL= /GRTC_MODx/modx-1.0.2/    
    SelfReference= ?id=5    
    SelfReference2= ?id=5
  </div>
</div>

I looked just like that in 1964.

98 Posts

Halfnium Reply #5, 16 years, 8 months ago

Please belay my previous question. I think that the author of SelfReference, Aleksander Maksymiuk, has straightened me out on problem cause & solution. After I get a few ZZZZZZs, I will try what he has suggested and, hopefully, deliver a solution to this forum.

Cheers!

I looked just like that in 1964.

98 Posts

Halfnium Reply #6, 16 years, 8 months ago

As promised, Aleksander has straightened me out on application of his SelfReference snippet. (See http://setpro.pl/software/self-reference#jf4b2768ea) Here are four use cases:

1) With an anchor tag
a) Within a Template

<a name="topofpage"></a>
... main part of the page ...
<a href="[(site_url)][!SelfReference!]#topofpage">Jump to Top of Page</a>

b) Within a Page directly rather than within a Template

<a name="topofpage"></a>
... main part of the page ...
<a href="[(site_url)][[SelfReference]]#topofpage">Jump to Top of Page</a>

2) With form, input and button tags
a) Within a Template

<a name="topofpage"></a>
... main part of the page ...
<form method="get" action="[!SelfReference!]#topofpage">
  <input type="hidden" name="id" value="[*id*]" />
  <button id="go_pagetop" type="submit">
    Jump to Top of Page
  </button>
</form>

b) Within a Page directly rather than within a Template

<a name="topofpage"></a>
... main part of the page ...
<form method="get" action="[[SelfReference]]#topofpage">
  <input type="hidden" name="id" value="[*id*]" />
  <button id="go_pagetop" type="submit">
    Jump to Top of Page
  </button>
</form>

Notes:
The form/input/button solution passes id of the current page through a hidden field. Otherwise it would be lost, and navigation would therefore lead to the site’s start page.

The variations in the calls, the cacheable [SelfReference] vs. non-cacheable !SelfReference!, relate to whether the snippet is used within a Template or directly within a specific Page.

Aleksander offers another version of his snippet, called SelfReference2, that adds a parameter to redirect navigation to another page.

I looked just like that in 1964.

2,314 Posts

anonymized-26931 Reply #7, 16 years, 8 months ago

thanks halfnium!

[[!SelfReference!]] ... should be either [[ ]] or [! !]

98 Posts

Halfnium Reply #8, 16 years, 8 months ago

Thanks. I have modified my previous post and hope I’ve got it right. The last thing I want to do is create confusion.

I looked just like that in 1964.

98 Posts

Halfnium Reply #9, 16 years, 6 months ago

Dear Alik,

See an example site using SelfReference here:

www.gopgroton.com

The "back to top" button at the bottom of each page works quite well except on this page:

http://gopgroton.com/index.php?id=10

The problem is not very important. However, I thought you would like to know about it.

The problematic page uses the eForm snippet to control a user contact form.

One nice eForm feature is reporting input errors while retaining the inputs. For example, the contact page requires a user name with at least two substrings, an e-mail address, message text and a correct captcha string. Failure to provide these is met with a page reload showing an error message and the user’s inputs. (Try it.) This makes it easy for the user to understand his mistake, change only the bad input(s), and submit the form again.

However, if the "back to top" button is clicked on a page with an eForm error message, the form inputs are all lost. (Try it.)

Because this page is short, no one is likely to use the "back to top" button. So this is not a practical problem. It is annoying, however.

Ideas?

-- Halfnium

I looked just like that in 1964.

209 Posts

Alik Reply #10, 16 years, 5 months ago

SelfReference interacts with eForm correctly. In order to check this, you can visit my contact page at http://setpro.pl/contact, expand the form by clicking plus-icon, next cause a submit error, and finally click "top of the page" link (it is implemented with SelfReference snippet).

Buggy behavior on your contact page is not caused by the SelfReference, but by the fact that your "Jump to Top of Page" feature is implemented by the form. You have actually two forms on your contact page: eForm and "Jump to Top of Page". Submitting one form destroys variables of the another. Implementing "Jump to Top of Page" feature as a simple link would correct this situation.