a:visited link not working in JSF

JSF CSS a:visited

[akabir77]

I have a jsf page where i am looping through a set of data and providing a link in each row to the user for drill down purpose.

<rich:dataTable
  id="searchResultsTable"
  rendered="#{!empty searchAction.transactionSearchResults}"
  sortMode="single"
  value="#{transactionSearchResults}"
  var="result"
  rows="#{searchAction.defaultPageSize}">

...
 <rich:column headerClass="#{(searchAction.sortBy eq '1')?(searchAction.sortOrder):(blank)}">
  <f:facet name="header">
   <h:commandLink
  id="transactionCodeSortButton"
  styleClass="transactionCode"
  action="#{searchAction.sortTransactions}"
  value="NIPR TRANS">
  <f:param
  name="sortBy"
  value="1" />
   </h:commandLink>
  </f:facet>
  
  <s:link styleClass="link-color" action="#{searchAction.getAllDetails}" value="#{result.transactionCode}" />
  </rich:column>

and here is the css for it

a.link-color{
color:blue;text-decoration:none;
}


a.link-color:visited {
color:red;text-decoration:none;
}

Now the issue is in loop jsf doesn't let me set the id. so when users drill downs row one, it shows the link as red which is fine but if the user comes back to the same page with new results the row one still shows as visited.

I was wondering if some one else have faced this issue and know how to work around this.

Thanks

[lucy24]

Ooh, what a fun question.

Advance warning: I will probably never get around to answering the question.

See, this is a generic CSS-link issue. The CSS doesn't know anything about what's on the other end of the link. It only knows whether you have clicked it within the last {period set by user in browser prefs}. So the exact same thing would happen if you clicked on a link to a static www page yesterday, and today the content of the page is entirely different. Your browser doesn't know that.

You can set a single link color, the same whether the link has been visited or not. This may annoy the user. Or you can set a real class-- not a pseudo-class like "visited"-- which changes when your content changes, if and only if the user has seen the content before the most recent change. That is,

link.visited ≠ link:visited

[akabir77]

Hi
Thanks for your reply.
I am sorry I am little confused here. Could you please give me an example of the html/jsf part and the css part please. I have named my styleClass="link-color". so what should be the css for this? As you can tell I am pretty new at this. thank you for your help. Also I am not sure what you meant by "link.visited ≠link:visited". What does ≠means?

[Fotiman]

I don't know much about JSF, but from what I can tell the output of this:

<s:link styleClass="link-color" action="#{searchAction.getAllDetails}" value="#{result.transactionCode}" />

Will be something like this:

<a class="link-color" href="#{result.transactionCode}" ...

Where {result.transactionCode} is some dynamic value. The problem is that you're relying on the hash character to provide uniqueness. I think you'll find this is unreliable. If this was using a unique query string value instead, then it might work as you expected (as long as result.transactionCode was unique to each row item). For example:
href="#123" and href="#124" both point to the same resource (which happens to be whatever the current page is), with both referring to some anchor location on that page. Using a querystring instead, you might have:
href="?transactionCode=123" and href="?transactionCode=124", in which case the browser will see these as 2 different resources.

Note, for future reference, you are better off pasting in the HTML source rather than the JSF source, since it's the HTML that ultimately matters, not the JSF.

[akabir77]

I understand that using a href would resolve this issue but the problem is if i switch to a href I have to pass tons of variables which is other wise injected when i use jsf tags like s:link. That's why i was trying to find a work around (if there are any) for this issue. seems like the only option is for me to switch to regualr a link.

[Fotiman]

seems like the only option is for me to switch to regualr a link

I assume that what you mean by "regular a link" is to use a link that has querystring values instead of trying to rely on the hash. In which case, yes, I believe that is the only option for allowing the browser to recognize them as unique URIs.

[lucy24]

I meant that the class "visited" (which you would probably want to call by a different name) is not the same as the pseudo-class "visited". A class is something you define yourself based on your own rules; a pseudo-class is intrinsic to CSS.

So if you say a.beenthere {blahblah}

you can write your code to change the class of any given link as needed. Using :visited is trickier.

[Fotiman]

lucy24, where did you see the class "visited" being used? I don't see that in what was posted above.

[akabir77]

lucy24. could you please provide me with an example code.

[akabir77]

I thought i was calling it by a class name "link-color"

a.link-color:visited {
color:red;text-decoration:none;
}


and my html code

<s:link styleClass="link-color" action="#{searchAction.getAllDetails}" value="#{result.transactionCode}" />

[Fotiman]

I just re-read the posts above. I think lucy24 was suggesting that you attach classes to elements using JavaScript instead of using the built in :visited pseudo class. In my opinion, that's not a good solution because:

1. It would be totally reliant on JavaScript
2. It would be a lot more work if you were trying to manage which links had been visited and maintain that list across pages

[lucy24]

Yes, my point was that the pseudo-class "visited" alone can't work as desired, because the HTML has no way of knowing whether the visited material has changed. It only knows that the link has been followed.