Not being able to use AUI select2 data or ajax features

aui

#1

Hi All, I was trying to use AUI select2 in aui 7.8.1, but was unable to use what I consider necessary features that made me use select2 in the first place. After a little searching, I found that what caused the error is located in aui-experimental.min.js

if ("select" === (n = i.element).get(0).tagName.toLowerCase() && (this.select = r = i.element),
                    r && e.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function() {
                        if (this in i)
                            throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a <select> element.")
                    })

Why is this code used?


#2

Hi @kirutes89,

could you please also tell us what you consider to be an error and how you wanted to use the AUI select2 ?


#3

Thanks for quick reply @pvandevoorde,
According to select2 documentation, which by the way I was referred from the AUI Select2 documentation, states that I could configure select2 by passing object to it, But when I do AUI throws a error.
Also which version of Select2 does AUI Select2 use?


#4

Hi @kirutes89,

AUI uses version 3.4.5 of Select2. The unminified line of code reads as follows:

        // abstract
        prepareOpts: function (opts) {
            var element, select, idKey, ajaxUrl, self = this;

            element = opts.element;

            if (element.get(0).tagName.toLowerCase() === "select") {
                this.select = select = opts.element;
            }

            if (select) {
                // these options are not allowed when attached to a select because they are picked up off the element itself
                $.each(["id", "multiple", "ajax", "query", "createSearchChoice", "initSelection", "data", "tags"], function () {
                    if (this in opts) {
                        throw new Error("Option '" + this + "' is not allowed for Select2 when attached to a <select> element.");
                    }
                });
            }

It would seem that Select2 has code in it to reject configuration options that would conflict with the data it reads from a <select> element itself.

What does the code you’re using to initialise the AUI Select2 look like? What options are you passing in via your config object? What attributes exist on the <select> element? Are there any overlaps between those attribute names and the keys of your config object? If so, can you remove the duplicates?

AUI’s documentation links are linking to the latest version of Select2, which is misleading. I will address this problem against https://ecosystem.atlassian.net/browse/AUI-3725 and release an updated version of the docs within the next day.


#5

Hi @daz,
Thank you for your helpful insight.
As I stated in my question why does AUI Select2 reject the configuration options.
Ooh, And here is the code that I am using to initialize the AUI Select2

AJS.$("#selectId2").auiSelect2({
              placeholder: "Select Project",
              data: dataArray
          });

#6

@kirutes89, I will guess that the element with an id of #selectId2 contains nested <option> elements? I believe Select2 is complaining because you are passing data as configuration, but the select element itself already has options. Select2 doesn’t know which set of options are correct, so it throws this error.

I believe that in order to fix this, you need to either:

  1. Remove the nested <option> elements from the <select id=selectId2> element, or
  2. Remove the data key from your configuration object.

#7

Thanks @daz,
#selectId2 doesn’t contain nested elements, I removed the data key from the configuration object for the work around which leaves me to populate the select2 by appending option elements.

But it would be really great that AUI couldn’t throw an error when using certain configuration key.


#8

I understand your request @kirutes89, though this is native Select2 behaviour, not an AUI addition – see https://github.com/select2/select2/blob/3.4.5/select2.js#L834-L851. It is possible that the behaviour changed in the latest version of Select2, but I am not sure.