0

Because of business rules and requirements, I need an element that is tab-able (without the use of tabindex), looks like a link, only has javascript functionality (it needs to make an ajax call to a web service for instance) and it cannot contain any special character such as '#' because the url will have that at the end and that will be blocked by our firewall which is set very strict due to external regulations. Also the href cannot be empty because of our web site resides inside Sharepoint and keeping it empty means that you are redirected to the default landing page.

I've come across various questions which all contain some truth and arguments to use one element over the other, but none of those questions contained a satisfying answer, if it even had a marked answer. E.g.:

those two examples are not completely satisfying because for the first one, eventhough one answer has a high amount of votes but I'm not sure if that answer meets the above requirements. the second one for the same reason really.

In summary, which of the below options is preferred, keeping the restrictions and requirements in mind as well as known best practices for semantics and javascript? 

<a href="javascript:void(0)" class="action"></a>

OR 

<a href="" class="action"></a>

OR 

<a href="javascript;" class="action"></a>

OR

<button class="action"></button>

OR

<span class="action"></span>

WITH (example) ajax call:

<script>

    $('.action').click(function() {
        $.ajax({
            url: "test.html",
            context: document.body
            })
            .done(function() {
                $(this).addClass("done");
            });
        });
    });

</script>

As mentioned the restrictions cannot be changed. Period.

Community
  • 1
  • 1
reaper_unique
  • 2,916
  • 3
  • 28
  • 48
  • 1
    You should follow the semantics - since it has a click, most likely it is a link or a button. – fotanus Jun 26 '13 at 16:53
  • Ok, but which one is your preferred choice from the above suggestions? – reaper_unique Jun 26 '13 at 16:54
  • 2
    And what's your question? Best practise always is to have an actual, working URL as fallback. Btw, you forgot to `e.preventDefault()` in your handler – Bergi Jun 26 '13 at 16:55
  • My prefererd solution would be a `a` tag, with a `href` of whatever, and you just break the usual flow of the tag in your javascript method attached to the click event, with e.preventDefault(). – Laurent S. Jun 26 '13 at 16:55
  • @Bergi, added a clear question after the part "in summary,". – reaper_unique Jun 26 '13 at 16:57
  • 1
    If you don't explain *why* the answers on the other questions didn't satisfy you, this question is invalid and should be closed as a duplicate. Btw, [starting a bounty](http://stackoverflow.com/help/bounty) might have been the better choice – Bergi Jun 26 '13 at 16:57
  • Your restriction regarding `#` doesn't make sense; the URL won't be updated if you handle the click properly. – Evan Davis Jun 26 '13 at 17:00
  • 1
    Firewalls that don't allow `#` in URLs... that's especially interesting since `#` is never sent to the server in a request in the first place. You say you cannot change your requirements, but I'm wondering if some of these restrictions exist in the first place. Can you elaborate a bit? – Brad Jun 26 '13 at 17:00
  • Regarding the '#' in the url. I've checked with the people that are responsible for the F5 and that is the reason why an ajax call failed. I don't have the exact message with me but that is what they showed me. – reaper_unique Jun 26 '13 at 17:02

3 Answers3

3

I remember once a teacher told me that the best was to use a <a> tag ahd the href should point to a page that probably does the exact same thing as the javascript event. So if for any reason the javascript is desactivated on the browser, the user could still use the website as any normal website... but well that works fine on papers... but it would be hard to implement.

If you add javascript code on the href or onclick your user wont be able to open the link on a new tab (by using the middle button or with the context menu)... I personally hate that on a website... links should be used to "link" pages.. not to make javascript changes on the current page, so a <button> seems more semantic to me...

You should also consider SEO (maybe) because robots will try to follow your links to index pages, but they wont follow buttons. Seo is a gray area, but i'd not be surprised if the robots have a max limit of links to follow.. and if your page has lots of links that are used only for js, maybe the robots are not able to correctly index your site

Finally, I rather have unobtrusive Js, so I really try to separate behavior from presentation. I find it ugly when i see html and js together

So i'd go with:

<button class="action"></button>

with an event listener on JS... hey.. but that's just me :)

Hope this helps

pleasedontbelong
  • 19,542
  • 12
  • 53
  • 77
  • As this question is now closed and I spend more time reading other answers in other questions I've decided to mark this answer as the correct one as it will be the one I will be implementing. All the items on our site are in fact elements that act like a button but are disguised as links. As it's possible to style a button like a link in all browsers (even IE7), I'm going to do just that. Thank you for the answers even though it was closed due to this being an opinion based question. If for some reason something goes wrong my second option will be . – reaper_unique Jun 26 '13 at 19:53
1

Personally, I like to use <a href="javascript:void(null);"> for my JavaScript-powered links. I know it's overkill, I know that javascript:; would be just as sufficient, but it's a habit I picked up.

That said, if the JavaScript has a non-JavaScript alternative (such as a link that might take you to a form, that has JavaScript to pop up the form in a dialog), I would use that as the href and make sure to prevent the default action in the event handler.

<button> is not a good idea unless you specifically want it to look like a button - depending on your site, this may be a good or bad thing, but you get a lot more freedom by using <a> and CSS.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

'a' tag with any href you want + event.preventDefault() on onclick function can help you, I think. Why 'a', becouse it good for styling you tabs headers, for example

paka
  • 1,601
  • 22
  • 35