Ajax prototype to load page then update hash

Question

I have 3 page with different concept/layout/animation.

I'm using prototype & script.aculo.us

I have this in my navigation:

<ul>
<li><a href="#page1" id="page1" onClick="showPage(page1);">PAGE1</a></li>
<li><a href="#page2" id="page2" onClick="showPage('page2');">PAGE2</a></li>
</ul>

and this is in my js:

windows.location.hash: 'web';

function showPage() {
startloading();
var url: '/localhost/page2'+web;
new Ajax.Updater('maincontent', 'page2', { method: 'get' });
finishloading();
}

the question & problem is:

1. Why in windows location hash is still: /localhost/page1/#page2 with or without if I use var url?
2. All the animation in page 2 doesn't work, because I didn't put the header, but if put I it, I got double header and still the animation won't work either.

Can anybody give me the solution?

Thank you very much.

Answer 1

The correct way to update your hash is:

window.location.hash = '#'+yourValue;

Hard to tell what exactly you're trying to do with your function but there's a few things that are clearly a bit wrong.

function showPage(var) { 
    startloading();
    var url: '/localhost/page'+var;
    new Ajax.Updater('maincontent', url, { method: 'get' });
    finishloading();
}

depending on what you're actually doing its fairly likely you would probably want something more like this:

function showPage(var) {         
    var url = '/localhost/page'+var;
    new Ajax.Updater('maincontent', url, { method: 'get' ,
        onCreate: function(){
            startloading();
        },
        onComplete: function(){
            finishloading();
        }
    });
}

Thats complete guesswork though, if you can provide more detail i can help more.

Answer 2

In your code

var url: '/localhost/page2'+web;

line throws error so hash cannot be changed. Fix it to

var url = '/localhost/page2'+web;

then it should work.