Graceful degradation of anchor tags with javascript

Question

I currently rely on anchor tags to perform AJAX requests on my web application (using jQuery). For example:

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function() {
            // Perform AJAX call and manipulate the DOM
        });
    });

    <a id="test" href="">Click me!</a>
</script>

However, these anchor tags pretty much become useless if the user disables javascript in their browser. What's the best way to handle graceful degradation of these anchor tags? Is my only option to switch them all to buttons inside form tags?

Edit: I should be more clear and specify that my AJAX call is an HTTP POST to a URL that I cannot, for security reasons, expose to normal HTTP GETs (e.g. think of a delete url "/items/delete/1"). With that in mind, I can't change the href of the anchor to be "/items/delete/1" in order to satisfy users with javascript turned off since it poses a security risk.

Answer 1

Read about Unobtrusive JavaScript to learn how to separate JS behavior from your actual markup. Anything else I post will just be a rehash of what someone else has said better elsewhere

Answer 2

Simple, don't use the javascript: URI syntax as the href, at least, not in the HTML delivered to the client.

Deliver the HTML from the server with the href taking the user to whatever page you want to take them, and then replace the href (or capture the onclick event) for the anchor tag and do whatever you wish, being sure to prevent the default action for the event fire.

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function(e) {
            // Perform AJAX call and manipulate the DOM
            e.preventDefault();
        });
    });

    <a id="test" href="/Proper/URI">Click me!</a>
</script>

And I fully agree with the suggestion to read Unobtrusive JavaScript.

Answer 3

One option (for which I'm sure I'll get downvoted), is to not bother with people who have javascript off. Display a message in a <noscript> tag informing the user that your site requires Javascript.

It'll affect two groups of people: those who have knowingly disabled javascript and presumably know how to turn it back on, and those who are viewing your site on an older mobile device.

Consider how important these groups of people are before you go on spending hours and hours developing for them.

Answer 4

See the Stack Overflow question What is the difference between the different methods of putting javascript in an <a> and my answer.

Answer 5

The answer I was looking for is buried in one of the comments:

your use of the <a> tag to do an HTTP POST operation is conflicting. <a> was designed for HTTP GET. You won't find a satisfactory answer here if you keep the semantics of your operation embedded in an <a> tag. See http://www.w3.org/2001/tag/doc/whenToUseGet.html

Answer 6

Your best bet for no-JS would probably be to have a form with a submit button, and point the form's action to your URL.

You can style the button to look like a link (or like anything else):

<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>

There's a good example of styling buttons in Particletree's article: Rediscovering the Button Element