Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Javascript Trigger doesn't load after pageload

childnode November 19, 2012

We are using the documentation Theme but many users complain about the bad user experience and behaviour of the documentation sidebar.

The main problem: When the list of pages in a space grows and there is a page (with subpages) you have to scroll down for in the sidebar, you do this once.
But evertime you once entered such a page, the full page reloads, you have to scroll down the sidebar again to select a sub-page / follow-up-page in the documentation tree.

So I thought I could manage this with a little bit jQuery... but I can't ;/

The problem is, that unfortunately neither AJS.toInit nor AJS.$(document).ready are fired/triggered when the page reload is really done but some (milli)seconds before.

<!-- SCROLL SIDEBAR TO SELECTED SIDE -->
<script type="text/javascript">
AJS.$(document).ready(function() {
    if (AJS.$("SPAN.plugin_pagetree_children_span[style*=font-weight]").length == 1) {
    AJS.$("#splitter-sidebar")
    .scrollTop(
      AJS.$("SPAN.plugin_pagetree_children_span[style*=font-weight]").offset().top
      -155
    );
  }
});

// onother test:
AJS.toInit(function() { console.log("READY LOADING PAGE Test toInit()") });
</script>



How can I handle this?! Is there another trigger I can bind this "post-page loaded" event to?

Also discussed in https://support.atlassian.com/browse/CSP-91915

3 answers

1 accepted

4 votes
Answer accepted
Carsten A.
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 21, 2012

As you wish.

Instead of AJS.$(document).ready() which would be triggered when the documents DOM is loaded, use AJS.$(window).load() instead which is triggered "later" when all the page content is fully loaded.

I'm glad I could help you and I accept your apology. :-)

1 vote
Carsten A.
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 19, 2012

As I know it is not a "full page reload" (don't know how to explain it) which would trigger the event.

But isn't it better, to just store the scroll position and reload it after your page reload?
You can find a howto in jQuery forum: http://forum.jquery.com/topic/save-scroll-position

childnode November 19, 2012

That would

a) cover the problem if the user browses but not if the user follows a link to another space and page that is "ranked" very deep in hirarchy

b) you'll ran into the same problem as I NEED TO GET HOOKED THE RIGHT TRIGGER. The positioning problem is solved for me with the function above.

c) for me, it a full page reload. The page turns white, network-tab in Firebug will show a new GET (re)loading the wiki

Carsten A.
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 19, 2012

a) do you mean an expanded hierarchy will be collapsed again after reload?

b) When you apply storing scroll position to a cookie using .click() event? I suggest using $(window).load() to load the scroll position, as it only makes sense to apply it, when the complete page is loaded instead only the documents DOM.

c) There is a difference between fully loading an html document and loading new content into an html content. Both do GET, both may turn the page white, but I doubt both fire document.ready event.

Please verify it and let us know the results.

childnode November 19, 2012

ok, an example: https://wiki.childno.de/display/LINUXSERV/SSL+Webserver+Zertifikate

expand all level1 pages in the tree.

You might "force" the problem locally when using this code in the navigation section of the documentation theme but deactivating the checkboxes above for page tree

{livesearch:id=1}
{pagetree:expandCollapseAll=true|startDepth=2|searchBox=false}

This forces the pagetree is rendered with an open level1

nevertheless..

All level1 opened, visiting the above page right?! Now you should see the page you are on is out of screen (when sidebar is scrolled to top).

So scroll down, select the next page to the actual one.

a) NO, The auto collapse of other than your "tree" might be resolved by using the pagetree macro

b) The problem is still: I don't know WHEN to restore it!!!!!!! <<<<<< Try it, fail it. $(window).load() will not help (for me)

c) Please open your Firebug or whatever...INDEED Confluence will do a fully reload!

Carsten A.
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 19, 2012

Oh man. Um die Uhrzeit im Kopf noch auf englisch umschalten. ;-)

Back to topic:
On your example page I don't have any checkboxes. But I did expand all first level elements on the tree manually.
I clicked a page at the bottom of navigation, and it reloads the page (I didn't check the console output to my fullest, but I assume you were right). After the page loaded all manually expanded elements were collapsed again. Looking at the DOM, you're tree children are not initially loaded. What makes it harder to actually load the tree expanded again.
But is it possible for you to convert the page-loads to ajax-calls injecting the new content into your main div (just let your anchor tags execute javascript instead of page load)? You wouldn't need document.ready or windows.load anymore and your sidebar div (navigation) would remain exactly the same.

childnode November 20, 2012

The collapse is done in the default pagetree...But once again: That's neither the problem nor does it affect the core problem... It will just occur later (much more sites on level1 needed to exceed the sidebar space on your browser vertically)

nevertheless

Dear Carsten: I have to say SORRY

$(window).load() respectively AJS.$(window).load() was the right place but just didn't worked because of another script failure... dough

Now there is just some "screen flickering" when page load is "finished" but it's ok for me now

childnode November 21, 2012

@Carsten: Please feel free to create another answer with the $(window).load() hint and I'll accept this to pass the bounties

0 votes
childnode November 20, 2012

- the "checkboxes" are in the backend ....

so I now changed the theme to where the problem is much more prominent.

The collapse is done in the default pagetree...But once again: That's neither the problem nor does it affect the core problem... It will just occur later (much more sites on level1 needed to exceed the sidebar space on your browser vertically)

Dear Carsten: I have to say SORRY

$(window).load() respectively AJS.$(window).load() was the right place but just didn't worked because of another script failure... dough

Now there is just some "screen flickering" when page load is "finished" but ir's ok for me now

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events