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.
