How to handle not yet loaded javascript dependencies?

ttwellmann · October 16, 2019, 10:45am

I have a plugin that adds a button using jquery/javascript to the dom tree of a page. clicking this button triggers another javascript function. In this second function, a dialog is created and initialized. This includes initializing an auiSelect2 element.

My problem is that the user can click the button already at a point where the page is still loading javascript dependencies. As a result, the initialization function for auiSelect2 is not yet loaded and an unknown function error is thrown. How can I make sure that the dependencies are loaded earlier or that the button only appears once all dependencies have been loaded

sven.schatter · October 16, 2019, 12:29pm

Are you wrapping your JS in AJS.toInit already?

AJS.toInit(function(){
  // ...
});

ttwellmann · October 16, 2019, 5:37pm

Yes, that event is triggered even earlier. Is there any other event that indicates completion of loading of all resources?

daz · November 12, 2019, 4:38pm

In your Server app’s atlassian-plugin.xml, you can add a web-resource dependency on the select2 code, which will ensure that AUI’s code is loaded + executed before yours:


<web-resource key="my-feature-code">
  <dependency>com.atlassian.auiplugin:aui-select2</dependency>
  <resource type="download" location="my-feature.js" name="my-feature.js" />
</web-resource>

If you do this, you shouldn’t need to wait for any special events in JS; the jQuery plugin function should exist and be ready to use in your my-feature.js file.

Hope that helps!

Vaclav · February 7, 2020, 9:48am

Can you please share with me here how do you load a simple javascript to the page? I cannot get it working and seems atlassian stuff does not know how to help. Thank you!

daz · February 10, 2020, 2:58pm

Hi @Vaclav,

This guide from the Confluence Server documentation will hopefully help you get started: Including JavaScript and CSS resources.

If you want to follow something a little more guided, you can try this plugin tutorial from ComSysto Reply on adding JS code to an app.

Vaclav · February 11, 2020, 7:15am

Tried out. Did not help, still no js in my page…

My web resource:

<web-resource key="configuration-scheme-resources" name="Configuration scheme Handle Web > >
    resources">
    <dependency>com.atlassian.auiplugin:ajs</dependency>  
    <dependency>com.atlassian.auiplugin:aui-toggle</dependency>  
    <dependency>com.atlassian.auiplugin:aui-select</dependency>  
    <dependency>com.atlassian.auiplugin:aui-select2</dependency>
    <context>configuration-scheme</context>
    <resource type="download" name="configuration-scheme.js" location="configuration-scheme.js"/>
  </web-resource>

Loading js into page:

@Scanned
public class ConfigurationScheme extends JiraWebActionSupport
{
    private static final Logger log = LoggerFactory.getLogger(ConfigurationScheme.class);
    private static final String VM_TEMPLATE_NAME = "configuration-scheme";

    @ComponentImport
    @Inject
    private PageBuilderService pageBuilderService;

    @Override
    public String execute() throws Exception {
        pageBuilderService.assembler().resources().requireWebResource(PLUGIN_KEY_NAME + ":" + PLUGIN_WEB_RESOURCE_NAME_HANDLE_CONFIGURATION_SCHEME);
        return VM_TEMPLATE_NAME;
    }

daz · February 11, 2020, 9:01am

Are you getting any errors in the browser console? Are you getting any exceptions in the backend application logs?

If you go to the “manage apps” / “manage add-ons” page in the running product, then find your app, then expand the list of “enabled modules” for the app, do you see configuration-scheme-resources listed there as enabled?

Vaclav · February 12, 2020, 11:15am

If you go to the “manage apps” / “manage add-ons” page in the running product, then find your app, then expand the list of “enabled modules” for the app, do you see configuration-scheme-resources listed there as enabled? - YES, I see it, it is enabled.

I get a lot of warnings in the console:

JQMIGRATE: Migrate is installed, version 1.4.1
batch.js?locale=en-US:316 [Deprecation] document.registerElement is deprecated and will be removed in M80, around February 2020. Please use window.customElements.define instead. See https://www.chromestatus.com/features/4642138092470272 and https://developers.google.com/web/updates/2019/07/web-components-time-to-upgrade for more details.
_ @ batch.js?locale=en-US:316
batch.js?locale=en-US:172 DEPRECATED JS - AJS.debounceImmediate has been deprecated since 8.0.0 and will be removed in 9.0.0. Use equivalent functions from libraries like lodash / underscore instead  
     at Object.mKt5 (https://jira-dev.beeone.at/s/d79b36004ced7087e8089180adb6517c-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/2215ce00ef54a85f6638f0246e6582bf/_/download/contextbatch/js/_super/batch.js?locale=en-US:384:10080)
p @ batch.js?locale=en-US:172
batch.js?locale=en-US:691 Use of `window.Backbone` through AUI is deprecated and will be removed in AUI 9.0
hqGD @ batch.js?locale=en-US:691
batch.js?locale=en-US:816 Use of `window._` through AUI is deprecated and will be removed in AUI 9.0
snLL @ batch.js?locale=en-US:816
2ConfigurationSchemeAction.jspa?action=add:84 DEPRECATED JS - contextPath global variable has been deprecated since 7.4.0. Use `wrm/context-path` module instead.
printDeprecatedMsg @ ConfigurationSchemeAction.jspa?action=add:84
batch.js?locale=en-US:172 DEPRECATED JS - AJS.debounce has been deprecated since 8.0.0 and will be removed in 9.0.0. Use equivalent functions from libraries like lodash / underscore instead  
     at l.init (https://jira-dev.beeone.at/s/d79b36004ced7087e8089180adb6517c-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/2215ce00ef54a85f6638f0246e6582bf/_/download/contextbatch/js/_super/batch.js?locale=en-US:396:2075)
p @ batch.js?locale=en-US:172
batch.js?locale=en-US:172 DEPRECATED JS - Cookie has been deprecated since 5.8.0 and will be removed in a future release. Use cookie instead.   
     at https://jira-dev.beeone.at/s/3fda044f364b56a853d81de0c5ae2a8d-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/1237aa2acf5301e559f32ffea503095c/_/download/contextbatch/js/atl.admin,jira.global,atl.global,jira.admin,-_super/batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:665:112
p @ batch.js?locale=en-US:172
batch.js?locale=en-US:172 DEPRECATED JS - AJS.debounce has been deprecated since 8.0.0 and will be removed in 9.0.0. Use equivalent functions from libraries like lodash / underscore instead  
     at T (https://jira-dev.beeone.at/s/d79b36004ced7087e8089180adb6517c-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/2215ce00ef54a85f6638f0246e6582bf/_/download/contextbatch/js/_super/batch.js?locale=en-US:432:5770)
p @ batch.js?locale=en-US:172
batch.js?locale=en-US:972 To be compatible with jQuery 1.9 and higher,
t.fn.tipsy @ batch.js?locale=en-US:972
batch.js?locale=en-US:172 DEPRECATED JS - Dropdown constructor has been deprecated and will be removed in a future release. Use Dropdown2 instead.   
     at Object.i.bindConfigDashboardDds (https://jira-dev.beeone.at/s/d79b36004ced7087e8089180adb6517c-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/2215ce00ef54a85f6638f0246e6582bf/_/download/contextbatch/js/_super/batch.js?locale=en-US:3484:499)
p @ batch.js?locale=en-US:172
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'fragments' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'script_console' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'scriptrunnerbrowse_link' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'scriptrunnersettings_link' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'scheduled_jobs_jira' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'console' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'listeners' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'scriptfields' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93 modifyNavItemNames - 'jqlfunctions' was not found
(anonymous) @ batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:93
batch.js?locale=en-US:91 Downloading resources:
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/be9ff0efea54a6453d2ac60b92912a09/_/download/contextbatch/js/browser-metrics-plugin.contrib,-_super,-atl.admin/batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&whisper-enabled=true!order
batch.js?locale=en-US:172 DEPRECATED JS - Dropdown constructor has been deprecated and will be removed in a future release. Use Dropdown2 instead.   
     at w (https://jira-dev.beeone.at/download/contextbatch/js/atl.admin,jira.global,atl.global,jira.admin,-_super/batch.js?agile_global_admin_condition=true&cache=false&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:3:6196)
p @ batch.js?locale=en-US:172
batch.js?locale=en-US:172 DEPRECATED JS - Inline dialog constructor has been deprecated and will be removed in a future release. Use inline dialog 2 instead.   
     at f._initDialog (https://jira-dev.beeone.at/s/3fda044f364b56a853d81de0c5ae2a8d-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/1237aa2acf5301e559f32ffea503095c/_/download/contextbatch/js/atl.admin,jira.global,atl.global,jira.admin,-_super/batch.js?agile_global_admin_condition=true&healthcheck-resources=true&jag=true&jaguser=true&jmbonb=1&locale=en-US&whisper-enabled=true:8448:2832)
p @ batch.js?locale=en-US:172
batch.js?locale=en-US:91 Downloading resources:
css!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/8.0.3/_/download/batch/com.atlassian.auiplugin:split_aui.component.expander/com.atlassian.auiplugin:split_aui.component.expander.css
js!/s/630c9657d297f0eb366d5a228b67d5ba-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/7f3a53b60285f974407ab548e8846544/_/download/contextbatch/js/com.atlassian.jira.plugins.inform.batching-plugin.onboarding-assets,-_super/batch.js?locale=en-US!order
js!/s/630c9657d297f0eb366d5a228b67d5ba-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/8.0.3/_/download/batch/com.atlassian.auiplugin:split_aui.component.expander/com.atlassian.auiplugin:split_aui.component.expander.js?locale=en-US!order
js!/s/630c9657d297f0eb366d5a228b67d5ba-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/8.0.3/_/download/batch/com.atlassian.auiplugin:split_aui.component.message/com.atlassian.auiplugin:split_aui.component.message.js?locale=en-US!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/1.2.4/_/download/batch/com.atlassian.plugin.jslibs:moment-2.22.2/com.atlassian.plugin.jslibs:moment-2.22.2.js!order
js!/s/630c9657d297f0eb366d5a228b67d5ba-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/1.0/_/download/batch/jira.webresources:momentjs/jira.webresources:momentjs.js?locale=en-US!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/1.2.4/_/download/batch/com.atlassian.plugin.jslibs:moment-2.6.0/com.atlassian.plugin.jslibs:moment-2.6.0.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/2.0.3/_/download/batch/com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-messages/com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-messages.js!order
js!/s/d41d8cd98f00b204e9800998ecf8427e-CDN/sfcxff/802005/d39be12d487f7f71404159d6e5f814ff/2.0.3/_/download/batch/com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-hermes/com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-hermes.js!order
com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-hermes.js:6 Hermes Messages: running
com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-hermes.js:14 Hermes: loading message - IPN-91-user-becomes-an-admin
com.atlassian.whisper.atlassian-whisper-plugin:atlassian-whisper-hermes.js:14 Hermes: loading message - IPN-91-message-regular-user-check

When I install plugin it ends with error, but there is nothing in the logs. Plugin is enabled and functional except js not loading in the page.

daz · February 13, 2020, 8:55am

If the resource is enabled, there’s only a few more things I can think of that could be problematic:

Add a console log line you can search for in to the configuration-scheme.js file. Go to the page you expect it to load on, then search across all the loaded code to find that source. (In Chrome Devtools, click the three vertical dots in the top-right of the devtools panel, then click “Search”)
For debugging purposes, a <context>atl.general</context><context>atl.admin</context> to your web-resource, then re-install your plugin. The contents of your file should load on all pages now. If you still do not see it after this, it means there’s a problem with your web-resource construction.
The location of the JS file may be incorrect. This value is relative to your src/main/resources folder.
There may be multiple files named configuration-scheme.jsfiles in the application, and one of them is shadowing the file you expect to be loaded. If you try running your plugin using atlas-run instead of atlas-debug, check that the source in the configuration-scheme.js file is what you expect it to be. You can try renaming your file to something else, updating the location, and seeing if that helps.
The ultimate value passed to requireWebResource may not match the web resource’s complete module key. Check that the value of PLUGIN_KEY_NAME is the same as <atlassian-plugin key="[this value here]"> in your atlassian-plugin.xml file, and that PLUGIN_WEB_RESOURCE_NAME_HANDLE_CONFIGURATION_SCHEME is set to configuration-scheme-resources.
Add a debug breakpoint to the line that invokes requireWebResource and ensure it is getting hit. If not, it means your action isn’t wired up correctly.

Unfortunately, after this point, without looking at your source code, I can’t tell you what’s wrong.

Vaclav · February 13, 2020, 11:33am

None of this helped, issue persists. Can you send you the jar file somehow?