dannyman.toldme.com

JavaScript Hack: Hide an Element on a Page

JIRA is an issue tracking system that is really flexible, but sometimes presents irritatingly arbitrary limitations.

I have been working on a screen which uses multiple tabs. The tabs are there to make it easier for the user to find the fields they want to edit, without scrolling through a single long, complex issue. But every tab has a Comment field rendered on it, which makes things confusing, and makes each tab look like it needs scrolling.

So, just remove the Comment field from the Screen, right? No, it isn’t in there. So, can I remove Comment via the Field Configuration Scheme? No, it is mandatory. Damn your arbitrary limitation, JIRA!

Anyway, I don’t normally speak JavaScript, but I managed to gin up the following snippet to paste into a Field description which appears in the screen I wanted to tweak. It finds the element containing the Comment, and sets its style display attribute to none. As the page loads, the Comment box is rendered, but once the page load completes, the Comment box disappears.

<script type="text/javascript">
function hideCommentField() {
        var elements = document.getElementsByClassName('field-group aui-field-wikiedit');
        elements[0].style.display = 'none';
}
// http://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load
if(window.attachEvent) {
    window.attachEvent('onload', hideCommentField);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            hideCommentField();
        };
        window.onload = newonload;
    } else {
        window.onload = hideCommentField;
    }
}
</script>

It is ugly, but effective. Also, it is helpful for me to learn JavaScript!

PS: Thanks for the Guidance, Ed Burns!