CODEWITHSUNDEEP
javascriptcssxpages
Malin
Malin

Reputation: 697

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

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();
  });

Upvotes: 0

Views: 92

Answers (2)

Patrick Kwinten
Patrick Kwinten

Reputation: 2048

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!

Upvotes: 2

Per Henrik Lausten
Per Henrik Lausten

Reputation: 21709

You probably need to use the x$ jQuery selector as your ids contains colons: https://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages.

Upvotes: 1

Related Questions