homepage Welcome to WebmasterWorld Guest from 54.81.170.136
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
a:visited link not working in JSF
JSF CSS a:visited
akabir77




msg:4377194
 5:37 pm on Oct 20, 2011 (gmt 0)

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




msg:4377355
 11:04 pm on Oct 20, 2011 (gmt 0)

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




msg:4378617
 11:45 am on Oct 24, 2011 (gmt 0)

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




msg:4378657
 2:09 pm on Oct 24, 2011 (gmt 0)

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




msg:4378674
 2:57 pm on Oct 24, 2011 (gmt 0)

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




msg:4378694
 3:32 pm on Oct 24, 2011 (gmt 0)


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




msg:4378740
 4:43 pm on Oct 24, 2011 (gmt 0)

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




msg:4378747
 4:59 pm on Oct 24, 2011 (gmt 0)

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

akabir77




msg:4378760
 5:24 pm on Oct 24, 2011 (gmt 0)

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

akabir77




msg:4378762
 5:26 pm on Oct 24, 2011 (gmt 0)

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




msg:4378781
 5:52 pm on Oct 24, 2011 (gmt 0)

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




msg:4378957
 2:53 am on Oct 25, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved