Change CSS through web item

[Kathleen Jacobs]

I'm trying to create a plugin that selecting a web-item toggles some CSS.

I was able to set it up so selecting the web-item from the drop down would trigger an alert popup.

But when trying to add CSS, it doesn't seem to work. Just takes me back to the home page.

My JS file for testing:

AJS.toInit(function(){
    AJS.$('#website_link').click(function(){
        document.getElementById('jira').style.backgroundColor = "blue";
    });
});

 called by:

<web-section key="my_links_section" name="My Links Main Section" location="my_links_link" weight="10"/>

<web-item key="my_links_link" name="Link on My Links Main Section" section="system.top.navigation.bar" weight="47">
    <label>My Company</label>
    <link linkId="my_links_link"/>
</web-item>

<web-item key="website_link" name="Company Web Site" section="my_links_link/my_links_section" weight="10">
    <label>Web Site</label>
    <link linkId="website_link"/>
</web-item> 

[Bryan Robison · Accepted solution]

You need to add a "return false;" to your click handler to prevent the default link behavior:

AJS.toInit(function(){
    AJS.$('#website_link').click(function(){
        document.getElementById('jira').style.backgroundColor = "blue";
        return false;
    });
});

[Kathleen Jacobs]

Thanks!

It stopped refreshing and taking me to the home page, but still not seeing the CSS change :/ 

[Bryan Robison]

What element(s) are you trying to change? I'm not aware of any HTML elements with the id of "jira"

[Kathleen Jacobs]

got it working! Thanks!  Had to find a different element i guess

[Javier Portillo]

If you are talking about an issue web-item I would create an empty issue section and include there all the to the js staff

Hope it helps

[Kathleen Jacobs]

This is a dropdown list web-item