How do I do ajax navigation on pageload ?

Question

I have a page with several reports that are produced via ajax calls. I am prototype.js framework on this page for some of the display functions.

The links for each report have anchors/tags like #Report1, #Report2 etc, which are hrefs with onClick functions that do lots of work to create the report via javascript.

I would like to make it so if a user bookmarks a page with a link or navigates directly with a anchor/link in the url for my page to load the report.

So if the user goes to : http://mysite/myPage.jsp#Report2 it should load the page and go to the 2nd report.

Is there anyway in my pageload I can look at the anchor/link and perform the onlcick for that anchor? I was thinking I could create a big case/if statement to figure out what to do, but maybe there was an easier way.

thanks -- Joel

Answer 1

It all depends on how you're Ajax calls are structured really. I do something similar for opening the correct tab within a tab navigation. The code would start off like this, if you let me see how your Ajax events are hooked up then i should be able to show you the rest.

document.observe("dom:loaded", function() {
    if(window.location.hash){
      var report = window.location.hash.replace("#","");  
    }
});

EDIT

Looking at your code you would be much better off (imv) switching to an unobtrusive method where you attach events to your elements e.g.

$('ele').observe('click',doStuff.bindAsEventListener($('ele')));

This would enable you to more easily connect the same functionality to a click or a pageload but is also better practice anyway and would prevent code duplication etc. Obviously this is missing large chunks but hopefully you get what i mean