How to force up BranchSelector to work in non-hook plugin?

[Dana]

I am trying to make a button with dialog by clicking on it, and dialog will contain branch selector.

Firs part was done, and I decided to add BranchSelector in such way:

JS:

var panelContent = my.project.dialog.MyDialog();

var dialog = new AJS.Dialog(400, 250);
$MyContent.on('click', MyButton, function(){
            dialog.addPanel("", panelContent, 'panel-body');
            dialog.show();
        })

SOY:

{namespace my.project.dialog}

/**
 *
 *
 */
{template .MyDialog}
    {call Stash.template.branchSelector.field}
    	{param id: 'branch-id' /}
        {param initialValue: 'branch-id' /}
        {param labelText: 'Branch' /}
        {param showTags: true/}
    {/call}
{/template}

I see that SOY and JS were loaded. Also I have added branch-selector-dependency in atlassan-plugin.xml

<stash-resource key="res" name="Plugin Resources">
      <dependency>com.atlassian.stash.stash-web-api:branch-selector-field</dependency>
       <context>atl.general</context>
       <!--context>stash.page.pullRequest.view</context-->
</stash-resource>

I have tried different contexts as you can see, but the result the same - I see branch selector, but it is empty. Could you advice where I am wrong?

[xtjhin · Accepted solution]

Hi Dana,

I've tried your code and the branch selector indeed does not work.

This is a bug because jquery executes scripts immediately when it gets appended to a jquery object rather than just the dom. I'll add a fix to Stash 2.9.

To work around this immediately, you will have to append your branch selector field directly to the panel thats already in the dom. Just change your javascript to the following:

var panelContent = my.project.dialog.MyDialog();

var dialog = new AJS.Dialog(400, 250);
$MyContent.on('click', MyButton, function(){
    dialog.addPanel("", "", 'my-panel-body');
    $('.my-panel-body').append(panelContent);
    dialog.show();
})

Thanks for posting this question

Cheers,

Xu

[Dana]

It was helpful. thanks a lot! hope the problem is not very complicated to fix ;)

[xtjhin]

Hi Dana,

Firstly, are you getting any javascript errors?

Secondly, on which page are you inserting your dialog/branch selector? If it's the pull request page, then there might be something wrong. What do you get if you run the following in console?

require('model/page-state').getRepository().toJSON()

You posted a similar question and my colleague Adam left a reply. Does any of that help you?

You seem to have the right context if the soy and js are loaded and you're able to create a branch selector.

[Dana]

That question was about another error in another plugin, which was fixed 2.6.0& Also BranchSelector was inside hook6 but in this situatuin there is not hook-plugin.

[Dana]

That question was about another error in another plugin, which was fixed 2.6.0. Also BranchSelector was inside hook, but in this situatuin there is not hook-plugin.

[xtjhin]

Are there any javascript errors?

Try running this in your browser's javascript console, what does it return?:

require('model/page-state').getRepository().toJSON()

What's the URL of the page that you are adding the branch selector to?

[Dana]

The URL is

{HOST}/stash/projects/{PROJECT_KEY}/repos/{REP_KEY}/pull-requests/{PR_NUM}/overview

There is not any js errors, and require returns:

Object {slug: "rep_1", id: 1, name: "rep_1", scmId: "git", state: "AVAILABLE"…} ...