473,320 Members | 2,027 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Making AJAX loaded content accessible

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. }
  11.  
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>
  2.  
  3. <script type = "text/javascript">document.write('<a href="javascript:makeactive(\'partialpage.htm\')">Home</a>')</script>
  4.  
Apr 9 '08 #1
1 1757
acoder
16,027 Expert Mod 8TB
Add a return false in the onclick.
Apr 9 '08 #2

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

Similar topics

2
by: sgmaat | last post by:
I have create a AJAX webpage where if you press a link content is loaded into a div. NOw when this content is loaded no javascript is processed (i.e <Script>alert(..);</script>), but if the...
0
by: arunprabu | last post by:
Hi, I have a problecm with the AJAX request in my webpage. I have some filters on top of the page. I have a submit button and an empty div below the filters. Some of the filters have ajax...
3
by: battle.chris | last post by:
Hello. I'm using Prototype's Updater class to refresh sections of a page. Is there a way to include an external javascript files in the updated content; i.e., have a javascript tag with src...
1
by: geevaa | last post by:
http://www.phpbuilder.com/columns/kassemi20050606.php3 XMLHttpRequest and AJAX for PHP programmers James Kassemi Introduction: Although the concept isn't entirely new, XMLHttpRequest...
2
by: =?Utf-8?B?VG9u?= | last post by:
Hello, I want to understand teh benefits of ajax technology. Does anyone has a good website where AJAX EXTENSIONS is worked out so I really understand it. There a 2 main questions: 1) How about...
1
by: abaybas | last post by:
I'm creating a page in which a certain "content" part of the page is refreshed using ajax. I do this by using a div#content, and it's child div#container. the code: ... ...
10
by: =?Utf-8?B?RGFuaQ==?= | last post by:
Hi, Trying to create a master page that holds a menu, and the menu switches between pages in the site. 2 problem arrosed: a. When I navigate from page to page (all AJAX Web Forms, with the...
9
bugboy
by: bugboy | last post by:
I have a page being generated with PHP, it includes a DIV who's content gets swapped with ajax. the new content contains the following function call PHP echo'd inside the parent DIV. The code...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.