How to make ajax links css :visited

[zipz]

I have links which updates some content when the user click the link.
The problem is that my users complain that the links aren't turning to
the :visited color after they have visited the link. How could I
achieve :visited colors to the clicked ajax links.

Sample code. No jsfiddle needed?

element.addEvent('click:relay(a.ajaxlink)', function(event, element){
event.stop();
this.ajaxRequest(element, true); //send request and update content
}.bind(this));

[Sanford Whiteman]

> I have links which updates some content when the user click the link.
> The problem is that my users complain that the links aren't turning to
> the :visited color after they have visited the link. How could I
> achieve :visited colors to the clicked ajax links.

You need an href that matches the XHR URL. You don't have to follow
the href (preventing default), but CSS needs it to match to the
browser history.

Either that, or you can add a CSS class like 'fakevisited' onRequest
and also record all this info in your db so you can render in the
markup afterward. But for accessibility purposes, it's best to have
the href in there anyway, and much more manageable. I don't like to
fake visited but really use the browser to the fullest (also allowing
people to clear their history, use InPrivate sessions, etc. as
expected).

-- S.

[zipz]

> You  need  an  href that matches the XHR URL. You don't have to follow
> the  href  (preventing  default),  but  CSS  needs  it to match to the
> browser history.

Please explain.
Example in jsfiddle this time.

http://jsfiddle.net/NF2jz/2468/

[Sanford Whiteman]

> http://jsfiddle.net/NF2jz/2468/

There was some misinfo in my first post: I realize I wasn't actually
describing my methods accurately (as I see now looking at one of my
sites). I'll touch up your Fiddle by tomorrow so you can see.

-- S.

[Sanford Whiteman]

See

http://jsfiddle.net/UqSPf/5/

-- S.

[zipz]

Your example works fine but it's not really what I'm looking for as I
have the real url as href because I want the link to work if someone
opens in a new window/tab.

I tried to modify your example to take the real url with hash but that
didn't work.

I wonder if this could be done with a html5 solution.

[Sanford Whiteman]

> Your example works fine but it's not really what I'm looking for as I
> have the real url as href because I want the link to work if someone
> opens in a new window/tab.

"Open in new window" = using browser-native methods to execute the
default action.

There's nothing about the current Fiddle that won't work with the
default action -- if your back-end understands it.

> I tried to modify your example to take the real url with hash but that
> didn't work.

If you do this with a hash-style navigation, your back end needs to be
changed to manage state with hashes, i.e. if a request comes in for
#state, the back-end page needs to inspect 'state'. It's perfectly
doable, but you'll never do it with client-only modifications.

> I wonder if this could be done with a html5 solution.

Yes, but it will never be backward-compatible.

-- S.