By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,287 Members | 1,582 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,287 IT Pros & Developers. It's quick & easy.

Making AJAX loaded content accessible

P: 25
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:
Expand|Select|Wrap|Line Numbers
  1. <div id="links">
  2.   <a href="test.html">Home</a>
  3.   <a href="test2.html">Contact</a>
  4. </div>
and then i add the onclick functionality for my ajax load/fade function - "makeactive()":
Expand|Select|Wrap|Line Numbers
  1. window.onload = applyEvents;
  2. function applyEvents(){
  3.     var links = document.getElementsByTagName('a');
  4.     for (var i=0;i < links.length;i++) {
  5.     var link = links.item(i);
  6.     link.onclick = function() {
  7.        makeactive(this.href);
  8.         };   
  9.     }
  10. }
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!
Expand|Select|Wrap|Line Numbers
  1. <noscript><a href="fullpage.htm">Home</a></noscript>
  3. <script type = "text/javascript">document.write('<a href="javascript:makeactive(\'partialpage.htm\')">Home</a>')</script>
Apr 9 '08 #1
Share this Question
Share on Google+
1 Reply

Expert Mod 15k+
P: 16,027
Add a return false in the onclick.
Apr 9 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.