AUI Select 2 not working properly

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

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.

Actual behaviour

Expected

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

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

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

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

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