Making AJAX loaded content accessible

[nicky77]

Hi, apologies in advance is this may be a nonsensical ramble, but I'm hoping someone can give me some advice on how to solve the following problem:

I'm developing a site where the main content is loaded dynamically (and using a fade effect) into a placeholder div using AJAX. This is all working fine, however the tricky part for me is making the site accessible by using unobtrusive javascript.

What I want to do for users with javascript disabled is to load a full new page when they click on a link, but for everyone else I want to simply load content to fill the placeholder div. So I will need 2 separate files (i think) to link to for each link option on my page.

Here's what I currently have set up:

<div id="links">
  <a href="test.html">Home</a>
  <a href="test2.html">Contact</a>
</div>

and then i add the onclick functionality for my ajax load/fade function - "makeactive ()":

window.onload = applyEvents;
function applyEvents(){
	var links = document.getElementsByTagName('a');
	for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
       makeactive(this.href);
		};   
	}
}

What happens at the moment is that even though i am adding the onclick functionality, because my links have an href value, a new page is always loaded.

Is there anyway I can retain the value of the link's href without actually loading a new page - but only responding to onclick?

A really crude way to do this would be as follows, but there must be a better solution!

<noscript><a href="fullpage.htm">Home</a></noscript>

<script type = "text/javascript">document.write('<a href="javascript:makeactive(\'partialpage.htm\')">Home</a>')</script>

[acoder]

Add a return false in the onclick.