Addon only working on testing. Window.onload not working

#1

In a testing environment, my addon works (using atlas-run on localhost). In a vm file I have my function and then I call it with:

window.onload = function() {
changeCSS();
};

But after I package it and upload it to my production server of the software, it stops working. I ran the function with js while inspecting the page, so i know the function is there and works. So it seems that windows.onload isn’t working.

Am I missing something?

#2

@kjacobs, if you are running atlas-debug for your app development, please keep in mind that the bundling of javascript resources behaves differently. It might be that your javascript code is no longer working because Jira is doing minification/bundling in the production environment. See also https://developer.atlassian.com/server/jira/platform/web-resource/#WebResourcePluginModule-Non-BatchedMode

You can try to disable the compression by adding <compressResources>false</compressResources> to the configuration section of the maven-jira-plugin in your pom.xml. Package your add-on and install it in your production environment, if the problem is resolved you will know it is caused by the compression / bundling.

#3

Added false to the configeration section of maven-jira-plugin. Still no luck. All my code:

plugin.xml

<atlassian-plugin key="${atlassian.plugin.key}" name="${project.name}" plugins-version="2">
    <plugin-info>
        <description>${project.description}</description>
        <version>${project.version}</version>
        <vendor name="${project.organization.name}" url="${project.organization.url}" />
        <param name="plugin-icon">images/pluginIcon.png</param>
        <param name="plugin-logo">images/pluginLogo.png</param>
    </plugin-info>

    <!-- add our i18n resource -->
    <resource type="i18n" name="i18n" location="menu"/>
    
    <!-- add our web resources -->
    <web-resource key="menu-resources" name="menu Web Resources">
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        
        <resource type="download" name="menu.js" location="/js/menu.js"/>
        <resource type="download" name="images/" location="/images"/>

        <context>atl.general</context>
    </web-resource>

    <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>

</atlassian-plugin>

VM file:

#disable_html_escaping()

<script>

function bulkOff(){
    var box = document.getElementById("sendBulkNotificationCB");
    if(box){
        box.checked = false;
    }
};

function changeCSS() {
    var name = "ghx-board-name"
    var x = document.getElementById(name);

        if(document.getElementById(name) != null && x.innerHTML == "Test"){

            $("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");

        }
};
window.onload = function() {
  changeCSS();
  bulkOff();
};
</script>
#4

If you’re using jQuery, you can also rely on their logic to ensure the code snippet is executed when the window/document is ready for manipulation:

$(function() {
  changeCSS();
  bulkOff();
});

In addition, you might want to add a console.log('Hi!'); to the window.onload function to see if your code is executed. If it is, you should see ‘hi’ in the developer/javascript console.

#5

I tried what you suggested but it didn’t work. Someone else suggest:

AJS.toInit(function() {
 alert('hello world');
 console.log('Hi!');
});

This worked. but it’s not working for my function changeCSS(). What i’m changing is css on a kanban board. Not sure why it’s not triggering for this specific instance.

Trying to use web resource for js
#6

I used console.log(‘Hi!’); to try and figure out where it’s breaking. It looks like my function is being called before the page finished loading the kanban board. Is there a way to delay it until it’s fully loaded?

#7

@kjacobs ah yes, many features of the host products are actually loaded asynchronously. As such, executing code on load may get you stuck in a race condition.

If you want to resolve this, you will have to determine which element you require to be available and create logic to wait for this element to be available (I haven’t tested this code, I’m writing it on the fly):

function waitForElement(selector, callback) {
	var count = 0;
	var interval = window.setInterval(function() {
		count++;
		if (count > 10) {
			callback(new Error('timeout'));
		} else if (document.querySelectorAll(selector).length > 0) {
			window.clearInterval(interval);
			callback();
		}
	}, 500);
}

waitForElement('#myElementId', function (err) {
	if (!err) {
		console.log('the element is available!');
	} else {
		console.log('the element is NOT available after 5 seconds');
	}
});

You can also use 3rd party libraries like arrive.

2 Likes
#8

Thank you! That solved the problem :slight_smile: