AUI select2 - JS response not working

Hi Dariusz,

may be asking you straightly about Adaptavist Scriptrunner items.
Referring to last item of mine of select2 I am trying to receive single / multiple drop down elements selected and end up w/ nothing or w/ ‘undefined’.

This is the simple JS code:
AJS.$("#select2-example").auiSelect2();
AJS.$("#select2-example").on(‘select2:select’, function (e) {
console.log(e.params.data);
});

What’s the issue?
Checked the select2 page https://select2.org/programmatic-control/events but couldn’t get it running.
The ‘change’ event as mentioned brings up an ‘undefined’ only.

Distinguishing between single and multiple select2 should only be the id of AJS definition - right?

Thanks a lot in advance for support.

Regards.

1 Like

Hi @tw1,

It’s not super obvious from AUI’s documentation, but AUI bundles an older version of Select2: version 3.4.5. Its documentation is here: https://select2.github.io/select2/#documentation

I’m not sure if Select2 v3 includes the same event. You may want to try the one of the other events per this example in the Select2 v3 docs: https://select2.github.io/select2/#script_e11

Hope that helps!

Hi Chris,

thanks for reply.
Well, I do not have to understand why to get back from AUI v8/9.xx to v3.xx for select2…

Tried the links you’ve sent but… haven’t been successful.
Code looks like that now:

AJS.$("#select2-example").auiSelect2();
AJS.$("#select2-example").select2({
initSelection : function (element, callback) {
var data = [];
$(element.val().split(",")).each(function () {
data.push({id: this, text: this});
});
callback(data);
}
});
AJS.$("#select2-example").on(‘change’, function (e) {
console.log(e.data + $("#e8").select2(“val”));
}, false);

…which is definitely wrong.
The code must be reworked completely according to old implementation.
Could you please support?
Basically, the link to select2 web page provider and dev docs shouldn’t be provided reliably if there is another/older implementation. Or, may be, I misunderstood.

Thanks for supporting.

Hi @daz,

asking again kindly for support.
The solution you’ve suggested contradicts of what @dluksza has proposed as solution of my last request. Either this or that may work.
Since @dluksza has responded to what I started I want to continue that way.
Kindly asking again for example JS code of listening to select2 single/multiple selection.

Thanks.

… replying to myself …

Well, it’s resolved, even w/o help requested for two more times of ‘community’. :slight_smile:

The code for select2 initialisation and event listening.
Applicable at Scriptrunner for Confluence macro.
AJS.version 8.3.5
// J code

import com.atlassian.webresource.api.assembler.PageBuilderService
import com.atlassian.sal.api.component.ComponentLocator
 
def pageBuilderService = ComponentLocator.getComponent(PageBuilderService)
 
pageBuilderService.assembler().resources().requireWebResource("com.atlassian.auiplugin:aui-select2");
"""
<form class="aui">
    <label for="select2-multiple">Choose multiple products</label>
    <p>
    <select
        id="select2-multiple"
        multiple=""
        name="product"
        placeholder="Select products"
    >
        <option value="Confluence">Confluence</option>
        <option value="Jira">Jira</option>
    </select>
    </p>
</form>
"""

// JS code

AJS.$("#select2-multiple").auiSelect2();
 
AJS.$('#select2-multiple').on('select2-opening', function () { console.log('select2-multiple has clicked'); });
AJS.$('#select2-multiple').on('click', function () { console.log("Selected values are: " + AJS.$(this).auiSelect2('val')); });

For single select2 choice drop down, simply skip the config item ‘multiple=""’ of J code.

What a pity of community comment replied on this request, or even not provided but requested. Nothing really worked out. AUI documentation links of select2 provided by previous answer appear to be insufficient because of real select2 implementation simply differs. AUI documentation even is provided of an archive. Select2 link at AUI documentation of select2 leads to a version which is beyond of what Atlassian has implemented. It simply shows of the answers not to be familiar with the topic.
Solution consists of a mixture of both, the old AUI documentation links + original select2 provider’s newest version - to figure out Atlassian’s implementation. It’s like a joke, like trial and error, like ‘young researchers competition’.
It appears to be certainly questionable whether to consider Altassian application for customer introduction in case of having experienced this way of ‘Atlassian support’. Far away of what is being called support.

1 Like

Thank you for the solution, I had the same problem. :+1: