Call a JavaScript file from another JavaScript File

[AnupamS]

Hi folks,

I have a requirement where We are supposed to bring our JS file to a modular pattern because of ever growing size in our plugin. The challenge is that we need to call other JS files from the base file, however I am not getting a way. I tried registering the JS file in VM, did AJS.$.getScript  and many other methods which didn't work. I also registered file in the resources, but invoking is not happening.

Here are the two sample JS files

test1.js

+function(AJS) {
'use strict';
...
function anyMethod(){
alert("Hello from another file");

}
...
}(AJS)

test2.js

+function(AJS) {
'use strict';

function helloWorld(){
alert("Hello from another file");

}
}(AJS)

 I want to invoke the helloWorld of test2.js from test1.js file. Please let me know how should I invoke this.

P.S. We are using this design and changing the design for our JS files is not in the scope. 

[Rafael Pinto Sperafico]

Hi @AnupamS ,

Based on your description, it is unclear how your atlassian-plugin.xml is defined (in case of building an Atlassian add-on). Here is an example on how you should be Including Javascript and CSS resources to your plugin:

• defining the web-resource, resource and its context
• requiring the resource on your view, requireResource
• running scripts when the page loads

If you want to get your plugin more structured you should be looking into Backbone.js. Here is an example:

• Part 1 Webwork with soy, requirejs, backbone js in Jira plugins
• Part 2 Webwork with soy, requirejs, backbone js in Jira plugins

It is important to notice:

Backbone and Underscore

Backbone and Underscore are not added to window by AUI any more by default. If you depend on these libraries, you must pull in your own.

In Atlassian plugins, it is possible to add them to the window by explicitly requiring their web-resource keys, though this approach is deprecated and will be removed in AUI 9.0.

More information on https://docs.atlassian.com/aui/8.3.1/docs/upgrades/aui-8.html

Kind regards,
Rafael

[AnupamS]

Hi Rafael,

Thank you for your reply.

I am registering the js files in the xml

<web-resource key="sample" name="sample">
<context>jira.create.issue</context>
<context>jira.edit.issue</context>
<dependency>com.atlassian.auiplugin:aui-select</dependency>
<dependency>com.atlassian.auiplugin:ajs</dependency>
<dependency>com.atlassian.auiplugin:aui-experimental-iconfont</dependency>
<dependency>com.atlassian.auiplugin:aui-help</dependency>
<dependency>com.atlassian.auiplugin:aui-inline-dialog2</dependency>
<dependency>com.atlassian.auiplugin:dialog2</dependency>
<dependency>com.atlassian.auiplugin:aui-form-validation</dependency>
<dependency>com.atlassian.auiplugin:aui-message</dependency>
<dependency>com.atlassian.auiplugin:dialog</dependency>
<dependency>com.atlassian.auiplugin:aui-button</dependency>
<dependency>com.atlassian.auiplugin:aui-experimental-tooltips</dependency>
<dependency>com.atlassian.auiplugin:aui-forms</dependency>

<resource type="download" name="test-file1.js" location="/js/test1.js"/>
<resource type="download" name="test-file2.js" location="/js/test2.js"/>

</web-resource>

As the context is given, these two files should be loaded to DOM when the issue is on create/edit. I am able to invoke functions of test1.js after binding it as below

JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (event, context, reason) {
  //console.warn('##### JIRA.Events.NEW_CONTENT_ADDED', reason);
  if (reason == JIRA.CONTENT_ADDED_REASON.dialogReady || reason == JIRA.CONTENT_ADDED_REASON.pageLoad) {
..
//code
..
}
});

However the ask is to access functions of test2.js from test1.js 

As the context is already defined in the resource, I am able to invoke test1.js without requiring it in the view (vm file). As I am abstracting the actual files, which are pretty large, changing it to some other architect (as you suggested) is not possible at least at this point in time, 

Anupam