uldics uldics - 26 days ago 9
Javascript Question

Userscript getElementsByTagName not returning all links of Jira page

I need to make my Jira page on internal network show my assignee name in red color using a userscript without any external code use - no jQuery etc. And be as simple as possible, as I'm just learning.
Example page is here (List view): https://jira.atlassian.com/issues/?filter=-5

My internal page has following tag with my name in it, like this:

<a class="user-hover" rel="myusername" id="assignee_myusername" href="https://jira.mydomain.org/secure/ViewProfile.jspa?name=myusername" target="_parent">Myfirstname Mylastname</a>


My userscript is only making color changes on top and bottom lines of the page (I am logged in; it changes most links for userspecific ones). But the middle, where list of cases and assignees is listed, doesn't get affected. Here is my script:

// ==UserScript==
// @name Jira
// @namespace https://jira.mydomain.org/secure/Dashboard.jspa
// @include https://jira.mydomain.org/*
// ==/UserScript==
var links = document.getElementsByTagName( 'a' );
var element;
for ( var i = 0; i < links.length; i++ ) {
element = links[ i ];
if ( element.id = "assignee_myusername" ) {
element.style.color = "red";
element.style.backgroundColor = "black";
}
}


How do I make it highlight my name in Assignee column?

P.S. This is not same as the Ajax question, as that uses external code, which I specified in the beginning - no external code. No external code.

Answer

My guess is that the parts of the Jira page you want to script have not been loaded when your user script executes. Jira uses Ajax to load parts of the page asynchronously. Try adding a setTimeout around your code:

window.setTimeout(function () {
    var links = document.getElementsByTagName( 'a' );
    var element;
    for ( var i = 0; i < links.length; i++ ) {
        element = links[ i ];
        if ( element.id = "assignee_myusername" ) {
            element.style.color = "red";
            element.style.backgroundColor = "black";
        }
    }
}, 1000);

This will highlight the link after one second. It's a hacky solution, but if it works, then that at least will show you that the async loading is, in fact, the problem.

If you just want to change the style of an element with ID “assignee_myusername”, you don't need to use getElementsByTagName, you can use getElementById:

window.setTimeout(function () {
    var element = document.getElementById( 'assignee_myusername' );
    element.style.color = "red";
    element.style.backgroundColor = "black";
}, 1000);
Comments