Javascript Trigger doesn't load after pageload
Asked by childnode:

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.  

```
&lt;!-- SCROLL SIDEBAR TO SELECTED SIDE --&gt;&lt;script type="text/javascript"&gt;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()") });&lt;/script&gt;
```

<br />

<br />

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>


Answers:
author: Carsten A.
body: 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. :-)


author: Carsten A.
body: 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>

comments: author: childnode
body: 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


author: Carsten A.
body: 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.


author: childnode
body: 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!


author: Carsten A.
body: *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.


author: childnode
body: 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


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


author: childnode
body: - 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


Tags: ajs

custom-field

javascript

jql

usability