AUI Select 2 not working properly

, , ,
1

Hi colleagues.
I have a problem with multiselect in my plugin.
This is default multiselect example from aui manual.

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

<form class="aui">
            <select id="select2-example" name="select2-example" multiple="">
                <option value="CONF">Confluence</option>
                <option value="JIRA">JIRA</option>
                <option value="BAM">Bamboo</option>
                <option value="JAG">JIRA Agile</option>
                <option value="CAP">JIRA Capture</option>
                <option value="AUI">AUI</option>
            </select>
            <script>AJS.$("#select2-example").auiSelect2();</script>
        </form>

I try put it in edit.vm of my customfield to add multiselect support, but got a list of choises of select list.
What i doing wrong? Thanks in advice.

1 Like
2

Would you clarify what you mean? What was the behaviour you expected, and how did the actual results differ from that?
Perhaps you are looking for behaviour that is configured via Select2 options.

3

Actual behaviour

4

Expected

5

It looks like the script is not being run. I don’t know for sure, but here are a couple of thoughts:

a) You could put the script in a .js file that is downloaded along with your form.

b) Maybe the script is running, but at the wrong time (before the page is properly loaded). Try surrounding your script code with AJS.toInit(function() { your code goes here });

1 Like
6

I added it to the script tags in the template then in a separate js field with $ requireResource,
Also i tried to put it with

document.addEventListener('DOMContentLoaded',function() {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.text = "AJS.$('#select2-example').auiSelect2();";
    document.body.appendChild(script);
});

result was the same

7

Try with AJS.toInit because that guarantees to run the function passed to it only after the page has been fully loaded.

8

Yes, i tried it too. Script appears in page sourcecode but not launched

9

Thanks for help.
In the end I found a solution. Multiselect customfield edit.vm
edit.vm

<form class= "aui">
 <select class="select2-example" id="select2-example" name="select2-example" multiple="">
                    <option value="CONF">Confluence</option>
                    <option value="JIRA">JIRA</option>
                    <option value="BAM">Bamboo</option>
                    <option value="JAG">JIRA Agile</option>
                    <option value="CAP">JIRA Capture</option>
                    <option value="AUI">AUI</option>
                </select>
            </form>

multiselect.js

AJS.$(document).ready
(
    function()
    {
        createMultiSelectField();
        JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED,function(b,a)
        {
            createMultiSelectField()}
        )
    }
);

function createMultiSelectField()
{
    AJS.$(".select2-example").not("[select2='true']").each(
        function(a)
        {
            new AJS.MultiSelect
            (
                {
                    element:this,
                    itemAttrDisplayed:"label",
                    errorMessage:AJS.params.multiselectComponentsError,
                    showDropdownButton:true
                }
            );
            AJS.$(this).attr("select2","true")
        }
    )
}
4 Likes
10

Hi averzakov,

Please ensure, that you have all dependencies integrated in your layout as shown here:

<!-- External dependencies -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@atlassian/aui@9.4.0/dist/aui//aui-prototyping.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="https://unpkg.com/@atlassian/aui@9.4.0/dist/aui//aui-prototyping.js"></script>
<!-- / External dependencies -->
<form class="aui">
    <select id="select2-example" multiple>
        <option value="CONF">Confluence</option>
        <option value="JIRA">JIRA</option>
        <option value="BAM">Bamboo</option>
        <option value="JAG">JIRA Agile</option>
        <option value="CAP">JIRA Capture</option>
        <option value="AUI">AUI</option>
    </select>
</form>

Those dependencies are not integrated by default, thats why you have to add them to your project once.

Best
Julius