asked on

Changing the HREF attribute of the anchor tag using jquery.

I change the HREF attribute of the anchor tag using jquery. The code is shown below.

        var currentMsgData = msgData.Items[index];
        var headerLinks = $("#RightContainer #headerTitle").children("a");
        headerLinks.text(currentMsgData.Title);
        headerLinks.attr("href", currentMsgData.Url);
        headerLinks.attr("rel", "products_featured");
        headerLinks.attr("name", currentMsgData.PageGUID);
        headerLinks.attr("title", currentMsgData.Title);

Open in new window

The problem is, when I insert a url which is already visited, the css a:visited css does not work. The color of the anchor tag is always unvisited.

Is there any way I can make the color of the anchor tag visited when I supply a url that is already visited?

How does browser know that a link is already visited? Do you have any ideas?

Rikin Shah

Here you go!
http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery

Rikin Shah

Hi PagodNaUtak,

Sorry for wrong link. Here!
http://stackoverflow.com/questions/1929618/set-visited-link-color-to-whatever-the-color-of-un-visited-link-is-p-s-not-the

Regards,
Rikin.

PagodNaUtak

ASKER

I do not know If I explain my problem clearly. The code you gave me will not solve my problem. I know how to change the color of visited link or something.

I will repeat my question again.

By default the href attribute of the anchor tag is set to empty string. Then upon click of a button, I change the value HREF attribute of the anchor tag using jquery. If the value supplied in the HREF attribute of the anchor tag is already visited the color of the anchor tag is red, which is the color of unvisited link. What I need to do is, when I change the value of href attribute the color should be purple.

I think the problem is that the anchor tag is already created when the page is already created. So, when I change the value of the href of anchor tag the browser does not know that it's value is changed, that is why the color is still red.

Here is my CSS

a {color: #AA1133 !important; text-decoration: none; }
a:link { color: #AA1133 !important; }
a:visited  { color: #993399 !important; }
a:hover { color: #008899 !important; text-decoration:underline; }
a:active { color: #008899 !important; }

Open in new window

Rikin Shah

Hi PagodNaUtak,

Okay. In that case you will have to programmatically change the color when the attribute is changed.

Regards,
Rikin.

PagodNaUtak

ASKER

Yes, but how do I know if the url is already visited?

Rikin Shah

You can maintain a session or a cookie to store a flag value when the page is visited. And read the same value while loading the page and change the color accordingly.

Regards,
Rikin.

Badotz

When the link is clicked (visited) set a flag relating to that link to true

//
var link_ra = {};
...
function clink(e) {
    // Invoke this when the link is clicked
    var ev = e ? e.target : e.srcElement;
    
    link[ev.id] = true;
}

function rlink() {
    // Invoke this when the link color must be reset
    for (var x in link_ra) {
        document.getElementById(x).style.color = '#0000ff'; // Or whatever color you wish
        delete link_ra[x]; // Remove the association
    }
}
//

Open in new window

Please visit here for a comprehensive discussion of the delete verb.

ASKER CERTIFIED SOLUTION

PagodNaUtak

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

PagodNaUtak

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for PagodNaUtak's comment #37642722

for the following reason:

Found on my own the answer to my question.

Badotz

I offered a working suggestion. Others pointed you in the right direction.

Your "brute force" method does not address the changing of the link color.

You wonder why the CSS "does not work" when you bypass it with JavaScript.

If you delete this question, I think you should forfeit the points.

PagodNaUtak

ASKER

>> Your "brute force" method does not address the changing of the link color.

Here is the reason why it works. I start with stating the problem then why it works.

The problem is that the anchor tag is already rendered when the page is created. So, when I change the value of the href of anchor tag using javascript the browser does not know that it's value is changed, that is why the color is still red.

To solve my problem, instead of replacing only the value of the attribute of the anchor tag, I replace the whole tag with a new one. So, that the browser will refresh the rendering of the element and will now know if the url is already visited or not.

>> You wonder why the CSS "does not work" when you bypass it with JavaScript.

As stated in the problem, and in the comment ID #37642722.

The problem is that the anchor tag is already rendered when the page is created. So, when I change the value of the href of anchor tag using javascript, the browser does not know that it's value is changed, that is why the color is still red.

>> I offered a working suggestion. Others pointed you in the right direction.

I appreciate your comments or suggestions in the thread ID: 37635083. But the proposed solution does not meet with my current situation and design implementation of the application that is why I could not accept it as solution. Same thing with the other suggestions.

I cannot accept a suggestion when in fact, that suggestion is not what I used to solve my current problem and situation becuase this would be misleading to future reader of this question.

PagodNaUtak

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for PagodNaUtak's comment #37642722

for the following reason:

Please see my previous comment to answer the question of an experts why I accepted my own question.<br /><br />Regards,

Badotz

The question should not be closed, but deleted.