How do I add data to an <a> tag for use in Ajax Requests?

Question

I would like to have a link with looks something like this: Call to Action. However, if the javascript hasn't loaded completely and a user clicks that link, they will be redirected to a php script which spits out json. Alternatively, I will likely do something along the lines of Call to Action.

Is this the best practice for handling this situation?

Answer 1

The easiest solution is to put the data there with Javascript and then there is no timing mismatch.

<a id="link123" href="#">Call to Action</a>

with, say, jQuery:

$(function() {
  $("#link123").click(function() {
    // get JSON, put the address ehre
  });
});

Answer 2

I think I'm going to go with the metadata plugin for jquery.

http://plugins.jquery.com/project/metadata

Any reasons why this is a terrible idea?

Answer 3

Ideally, link to a document which is the same as the current document would be after the transformation.

It sounds like you are already overriding the normal link action, so (as far as the client is concerned) you probably just need to do something like adding &type=json to the URL before running it through XHR.