How to access links within repeat control via CSJS in XPages?

Question

In my application I display a link in a repeat control. This link will open a dialog control which displays details for a chosen row in the repeat.

Now I want to make the links appear as "read" when they are clicked.

I have defined the following function that will register the link ID clicked in a cookie and change the CSS color property of the link.

I can store the link ID in a cookie but when I try to find it in the DOM and change the CSS I fail. What am I doing wrong?

// onclick
function saveId(id) {
    if ($.cookie('idCookie')) {
        $.cookie('idCookie', $.cookie('idCookie') + "," + id);
    } else {
        $.cookie('idCookie', id);
    }
}

// make all links colored
function setVisited() {
    if (null != $.cookie('idCookie')) {
        var idArray = $.cookie('idCookie').split(',');
        console.log("#ids:" + idArray.length);
        for (var x = 0; x < idArray.length; x++) {
            console.log("ID: " + x + "=" + idArray[x]);
            if ($('#' + idArray[x]).length) {
                //link exists
                $('#' + idArray[x]).css('color', 'red');
            }
        }

    }

  // assign saveId()
  $(document).ready(function() {
    $('a').click(function() {
      saveId($(this).attr('id'));
    });
    setVisited();
  }); 

Answer 1

The problem is that you cannot use the : in your selector as described here:

How to get the element id in repeat control

so your code must look something like this:

// onclick
function saveId(id) {
    if ($.cookie('idCookie')) {
        $.cookie('idCookie', $.cookie('idCookie') + "," + id);
    } else {
        $.cookie('idCookie', id);
    }
}

// make all links colored
function setVisited() {
    if (null != $.cookie('idCookie')) {
        var idArray = $.cookie('idCookie').split(',');
        for (var x = 0; x < idArray.length; x++) {
            var link = $(document.getElementById(idArray[x])).get();
            if (link.length) {
                $(link).css('color', 'red');
            }
        }

    }
}

// assign saveId()
$(document).ready(function() {
    $('a').click(function() {
        saveId($(this).attr('id'));
    });
    setVisited();
});

good luck!