Client-web-item click event is not working, shows nothing

I’m trying to run a javascript on a button click which is added to the file/diff view in bitbucket. I’m using “client-web-item” with the context “bitbucket.page.repository.fileContent”. But nothing happens when a button is clicked, no error/warning in the console log.

client-web-item and client-resource from plugin.xml file:

<client-resource key="pr-overview-resources" name="Pull Request Overview Resources">
        <directory location="/css/" />
        <directory location="/js/" /
        <directory location="/templates/" /> 
        <context>bitbucket.page.repository.fileContent</context>
        <dependency>com.atlassian.auiplugin:ajs</dependency>
        <dependency>com.atlassian.bitbucket.server.bitbucket-web-api:pull-request-web-panels</dependency>
  </client-resource>

<client-web-item key="my-panel" section="bitbucket.file-content.source.toolbar.secondary">
    <label key="pcc.label" />
    <link linkId="my-panel" absolute="true"/>
    <styleClass>aui-button aui-button-subtle</styleClass>
    <dependency>com.myplugin.bitbucket.pcc-plugin:pr-overview-resources</dependency>
 </client-web-item> 

The javascript being used is as below: I get the first log in the console log, also the second one from insite AJS.toInit() but does not move ahead with web item click event. I have had used recently the web-panel resource where the button click event working just fine.

console.log("start of javascript");
AJS.toInit(function ($) {
    console.log("inside toIinit");
    AJS.$("#my-panel").click(function(e) {
        e.preventDefault();

    //var $webItem = $('#my-panel'); //I tried with this approach too, but no luck. 
    //$webItem.click(function() { 

        alert("Hello Atlassian!");
        console.log("inside button click");
        const newcon = document.getElementById("file-content");
        newcon.innerHTML = '<p>Hello Mansing!</p>'
        console.log("Start of Plugin");
    });
});

Any suggestion is appreciated. Thank you. @madamczak

Can at least someone help with client-web-item example, I couldn’t find one. Thank you.

1 Like

Hi @MansingShinde, can you share more information about what version of the Bitbucket you are using and on what page you are trying to render the web item?

This plugin location will only work on the page with a file source. There is a set of similar plugin points that were removed in Bitbucket 7 from the pull request page:

If that’s not your case, then you can try using browser devtools to locate your element in the DOM:

Thanks,
Maciej Adamczak

@madamczak - We’re using v5.2.2 and trying to render web item on the file view page (as shown in the screenshot below), I see the button appearing on a screen but nothing runs on the click event.

I did check the existing behaviour, and it looks like the button event handler doesn’t work. This is related to the deferred nature of the toolbar UI. When the web-resource is executed, and you try to query DOM element, the button is not yet rendered:

You can improve that by using event delegation, e.g.:

AJS.$('#file-content').on('click', '#my-panel', function(e) {
 // ...
});

Maciej Adamczak
Atlassian Developer

great help @madamczak