Question

I’m using jQuery ajax to load content into my web page.

When a user clicks on a link, the href turns a different color to symbolize they have clicked that link. The problem, however, is when that ajax content is flushed from the page to load other content in, and then brought back, the href selections the user had previously made are no longer maintained.

I am looking for a way to keep track of which links the user has visited as they navigate the ajax website so that all a:visited links stay persistant.

The content is dynamic, served from an MySQL database.

Answer 1

If your using ajax to load content, I’d assume the way to keep track if what was previously clicked is to simply use classes instead?

$(document).on('click', 'a', function(e) {
    e.preventDefault();
    //do some ajax stuff
    $(this).addClass('visited');
});

FIDDLE

If you are reloading content with ajax, and expecting visited links to be remembered, they won’t be. You’ll probably need to use cookies, local storage or keep track of what was clicked on the server, like say in a session variable that is updated with the correct links in the same ajax call that is getting the content.

The question then is why you are reloading the content from the database, instead of just detaching and reattaching it when it already exists on the page.