AJAX but accessible links

• Download source and example - 0.7 Kb

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.