Jira button not triggering JS

Kathleen Jacobs

Created a button, that when pressed, will change the CSS of the page.

I had this working with a drop down list but wanted it to be a button so moved everything in my .js file to the .vm file and included a button.

Now it's not working.  JS is not being called when button is pressed. Wondering what i'm missing:

VM file:

#disable_html_escaping()
<li id="test-menu">
            <button class="aui-button aui-button-primary" href="javascript&colon;changeCSS">Compress</button>
        </li>


<script language="JavaScript" type="text/javascript">

        function changeCSS () {
if(document.getElementById("ghx-board-name").textContent == 'test') {
                $(this).toggleClass('btn_yellow');

                $("span.ghx-extra-field.ghx-fa").css("margin-left", "30px");

                $(".ghx-issue .ghx-extra-fields").css("margin-top", "5px");
                $(".ghx-issue .ghx-extra-fields").css("display", "flex");

                $(".ghx-issue .ghx-flags").css("left", "20px");
                $(".ghx-issue .ghx-flags").css("top", "5px");

                $(".ghx-issue .ghx-highlighted-fields").css("margin-top", "5px");

                $(".ghx-issue .ghx-type").css("left", "5px");
                $(".ghx-issue .ghx-type").css("top", "5px");

                $(".ghx-issue-content").css("font-size", "12px");
                $(".ghx-issue-content").css("margin-top", "3px");
                $(".ghx-issue-content").css("padding", "5px");
                $(".ghx-issue-content").css("display", "flex");
                $(".ghx-issue-content").css("margin-bottom", "-30px");

                $(".ghx-issue-fields .ghx-key ").css("margin-left", "30px");

                return false;
            }
        });
</script>

 

XML file web-panel:

 

<web-panel key="ChangeCSS" location="com.atlassian.jira.plugin.headernav.right.context" weight="1">
<resource type="velocity" name="view" location="/js/menu.vm"/>
</web-panel>

 

Aleksandr Zuevich_6f4k0z

Hi,

Button doesn't have href attribute. Use onclick event instead. Change your button to:

<button class="aui-button aui-button-primary" onclick="changeCSS()" resolved="">Compress</button>