How to handle not yet loaded javascript dependencies?

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

Are you wrapping your JS in AJS.toInit already?

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

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

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!

1 Like