Click here to Skip to main content
Click here to Skip to main content

AJAX but accessible links

, 15 Nov 2006
Rate this:
Please Sign up or sign in to vote.
A JavaScript tip to make on the same HTML link a JavaScript call or a classic navigate for a new tab/ new window/ disabled JavaScript tool.

Introduction

You want to make a website with an AJAX-based navigation to only refresh changes that show the right content? Cool! It will bring a very reactive website.

<a href="javascript:LoadPage1()">page1</a>
a link calling a javascript method to ajaxify your page

Problem 1: This approch prevents your users from navigating in your website if they have disabled JavaScript.

Problem 2: It also prevents your users from opening this link in a new window or in a new tab :'(

Philosophy of "AJAXed and accessible links"

I will give you a very small and simple implemantation of my links approach which:

  • Allows the user to use AJAX on a simple click in the links
  • Make a classic navigation (using the href) when the user does a simple click without JavaScript enabled in his browser
  • Make a classic navigation if the user wants to open the link in a new tab or a new window

I choose the following implementation to decide to use a classic navigation if the user clicks on the link with:

  • the middle button
  • CTRL key pressed
  • SHIFT key pressed

In your website design, you have to make all your pages accessible by a link, redering the right state of the page on the server.

Implementation

I include a JavaScript SmartLink function in the source file you can download from above. To use it, you have to write your links like that:

<a id="SmartLink1" href="http://www.codeproject.com" 
       onmousedown="SmartLink(event, this, 'MyAjaxLink1()');">
  my smart link 1
</a>

The href attribute will be used if JavaScript is disabled, or for a new window/new tab,
the 'MyAjaxLink1()' will be the JavaScript call to do for the AJAX-ified link functionnality.

Conclusion

This approach needs to be more packaged but it will bring you a solution to make, at the same time, a disabled-JavaScript complient website and a cool AJAX website without breaking user friendly options like new tab/new window browsing.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

seubi
Web Developer
France France
No Biography provided

Comments and Discussions

 
GeneralReturn False Pinmemberjammer122114-Jan-07 13:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 15 Nov 2006
Article Copyright 2006 by seubi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid