Cant load javascript

I’m new and developing a new plugin for Bitbucket server, trying to load javascript using web-resources but can’t see it loaded in console log of browser. Any help is appreciated.

<!-- atlassian.plugin.xml -->
<web-resource key="pcc-plugin-resources" name="pcc-plugin Web Resources"> 
    <dependency>com.atlassian.auiplugin:ajs</dependency>  
    <resource type="download" name="pcc-plugin.js" location="/js/pcc-plugin.js" />
    <context>pcc-plugin</context> 
</web-resource>  

<web-panel key="my-panel" location="bitbucket.web.repository.browse.filebrowser.before">
    <resource name="view" type="velocity" location="/templates/new.vm" />
</web-panel>

// pcc-plugin.js
console.log("test")

Hi @MansingShinde
Try location="js/pcc-plugin.js" without /
For 100% to be sure that its not called try alert please.

@ladislavrolnik - I tried using “js/pcc-plugin.js” (without ‘/’) but no go. I have added alert(“I am an alert box!”); in pcc-plugin.js and I dont see any alert, it seems js is not being called for some reason.
// Web-panel and web-resource entries from plugin.xml

 <web-resource key="pcc-plugin-resources" name="pcc-plugin Web Resources"> 
    <dependency>com.atlassian.auiplugin:dialog2</dependency>
    <dependency>com.atlassian.auiplugin:ajs</dependency>  
    <resource type="download" name="pcc-plugin.css" location="/css/pcc-plugin.css" />
    <resource type="download" name="pcc-plugin.js" location="/js/pcc-plugin.js" />
    <context>bitbucket.page.repository.filebrowser</context>
  </web-resource>  
  <web-panel key="my-panel" location="bitbucket.web.repository.browse.filebrowser.before">
    <resource name="view" type="velocity" location="/templates/new.vm" />
  </web-panel>

// Velocity template

$webResourceManager.requireResource("com.atlassian.auiplugin:aui-dialog2")

<!-- Create a trigger which will be used by the JavaScript -->
<button id="dialog-show-button" class="aui-button">Show dialog</button>

<section id="demo-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" role="dialog" aria-hidden="true">
    <header class="aui-dialog2-header">
        <h2 class="aui-dialog2-header-main">Captain...</h2>
        <a class="aui-dialog2-header-close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
        </a>
    </header>
    <div class="aui-dialog2-content">
        <p>We've detected debris of some sort in a loose orbit.</p>
        <p>I suggest we beam a section aboard for analysis...</p>
    </div>
    <footer class="aui-dialog2-footer">
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">Make it so</button>
        </div>
    </footer>
</section>

/pcc-plugin.js

alert("I'm an alert box!")

AJS.$("#dialog-show-button").click(function(e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").show();
});

// Hides the dialog
AJS.$("#dialog-submit-button").click(function (e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").hide();
});

I’m trying to add a button on the repository page and that is being displayed, and trying to show up a dialog box once the button is clicked, this is not happening.

Thank you.

Have you tried wrap entire pcc-plugin.js inside

AJS.toInit(function() {
})

which is wrapper to standard JS DOM

$(document).ready(function() {
});

Hi @MansingShinde, can you double-check if the *.js file is located under the js directory? You specify the resource location as /js/pcc-plugin.js in your web-resource definition.

You can try using the WRM API to check if the resource is loading by browser. Turn on the browser devtools and run:

const wrmRequire = require('wrm/require');
wrmRequire('wr!com.exmaple.name.of.your.plugin:pcc-plugin-resources');
// the "we!" prefix is important and the ":pcc-plugin-resources" is the web-resource key

Before calling that function from the browser console, go to the Network tab in the browser tools and clear all the entries. Once you evaluate the above code, WRM should try to load your resource. You should see new network requests under the Network tab.

Thanks,
Maciej Adamczak
Atlassian Developer

@madamczak @ladislavrolnik - Thank you for your response, I’m now at least getting an alert box on the repository page load, I have added alert(); in my javascript. I hope that means, js is getting loaded, I’m not sure what change has fixed this issue.

However, the modal dialog does not show up on the button click. I know I started this thread just reporting a javascript issue, I hope I can continue on this thread discussing the issue around modal dialog.

I’m using Bitbucket Server v5.2.2 and using dialog2 Dialog2 - AUI Documentation, I’m not sure if dialog2 is compatible with Bitbucket Server v5.2.2, could not find any relative reference on documenation.

I have added maven dependency in pom file.

 <dependency>
            <groupId>com.atlassian.aui</groupId>
            <artifactId>auiplugin</artifactId>
            <version>5.2.2</version>
            <scope>provided</scope>
  </dependency>

//Web-resource and web-panel in atlassian-plugin.xml file

<web-resource key="pcc-plugin-resources" name="pcc-plugin Web Resources"> 
    <dependency>com.atlassian.auiplugin:dialog2</dependency>
    <dependency>com.atlassian.auiplugin:ajs</dependency>  
    <resource type="download" name="pcc-plugin.css" location="/css/pcc-plugin.css" />
    <resource type="download" name="pcc-plugin.js" location="/js/pcc-plugin.js" />
    <context>bitbucket.page.repository.filebrowser</context>
</web-resource>  
<web-panel key="my-panel" location="bitbucket.web.repository.browse.filebrowser.before">
    <resource name="view" type="velocity" location="/templates/new.vm" />
 </web-panel>

pcc-plugin.js

alert("I am an alert box!");

AJS.$("#dialog-show-button").click(function(e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").show();
});

// Hides the dialog
AJS.$("#dialog-submit-button").click(function (e) {
    e.preventDefault();
    AJS.dialog2("#demo-dialog").hide();
});

I have also added requiredResource in velocity template
//new.vm (here I have added requireResource with different keys just for the testing purpose)

$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")
$webResourceManager.requireResource("com.atlassian.auiplugin:dialog2")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-dialog2")

<!-- Create a trigger which will be used by the JavaScript -->
<button id="dialog-show-button" class="aui-button">Show dialog</button>

<section id="demo-dialog" class="aui-dialog2 aui-dialog2-small aui-layer" role="dialog" aria-hidden="true">
    <header class="aui-dialog2-header">
        <h2 class="aui-dialog2-header-main">Captain...</h2>
        <a class="aui-dialog2-header-close">
            <span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
        </a>
    </header>
    <div class="aui-dialog2-content">
        <p>We've detected debris of some sort in a loose orbit.</p>
        <p>I suggest we beam a section aboard for analysis...</p>
    </div>
    <footer class="aui-dialog2-footer">
        <div class="aui-dialog2-footer-actions">
            <button id="dialog-submit-button" class="aui-button aui-button-primary">Make it so</button>
        </div>
    </footer>
</section>

Do you know if I am missing anything here. Appreciate your help!

1 Like

My suggestion would be to check if the event handler is working e.g.:

AJS.$("#dialog-show-button").click(function(e) {
    e.preventDefault();

    console.log('The #dialog-show-button was clicked');

    AJS.dialog2("#demo-dialog").show();
});

I’m pretty sure Dialog2 is supported in Bitbucket 5.x. You can check the AUI version by typing AJS.version in the devtools e.g.:
image

Once you know the AUI version you can check the older versions of AUI docs: AUI - Archive

BTW: You can also find the matching AUI version on this page: atlassian / platform-module-usage / wiki / aui — Bitbucket

Unfortunately, the oldest tracking version of the Bitbucket is version 6.3.

Thanks,
Maciej Adamczak

@madamczak - Thanks for your response.

  1. I have already tried adding an event handler, and it doesn’t show anything on the console log, in fact, no log/activity showing in the console log of brwoser. when I click on the Show dialog button.

image

  1. The AUI version is 6.0.2 and when click on 6.0* from AUI - Archive it redirects me to the inline dialog page Inline Dialog - AUI Documentation.

Is anything I’m missing in plugin xml or velocity template or pom.

You can find the docs for dialog2 here: Dialog2 - AUI Documentation

As for adding the click event, I think you should try wrapping the JS code with AJS.toInit e.g.:

AJS.toInit(function() {
    AJS.$("#dialog-show-button").click(function(e) {
        e.preventDefault();
        AJS.dialog2("#demo-dialog").show();
    });

    // Hides the dialog
    AJS.$("#dialog-submit-button").click(function (e) {
        e.preventDefault();
        AJS.dialog2("#demo-dialog").hide();
    });
});

The AJS.toInit will evaluate the passed function when browser DOM is ready.

@madamczak perfect, after wrapping JS code in AJS.toInit, I see the dialog now appearing on click! appreciate your help man!

@ladislavrolnik - Thank you too, you suggested the same thing but looks like some dependencies were missing when I tried it yesterday with AJS.toInit(function() {})

1 Like