select2 multiple versions on same page/site

Question

Afternoon,

On a website I already updated lots of elements that used select2 v. 3.5.2 to the new v. 4.0 (and some of those elements are on the header of the website that is present on ALL pages)

Unfortunately on some pages of the website the X-editable jquery plugin is used, and that plugin doesn't play well with v 4.0 of select2 (please read: does not play at all)

My question is: Can I use both versions of select2 on some pages?

And if so, how? Since $(...).select2(); is blind to which version of select2 is loaded....

Example code:

    $("#search_species").select2({
        minimumInputLength: 1,
        maximumSelectionSize: 1,
        ajax: {
            url: "/php/search.php",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    query: params.term
                };
            },
            processResults: function (data, params) {
                return { results: data };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; },k

        templateResult: formatarResultados,
        templateSelection: formatarSeleccao,

    }).on("select2:selecting", function(e) {
        console.log(e);

        // window.location.href = e.params.args.data.url;
        // $('.select2-drop').hide();

    });

Answer 1

It should be possible (but not necessarily easy) to isolate Select2 4.0.0. It is nearly impossible to isolate older versions because they rely on global variables, while Select2 4.0.0 is actually pretty self-contained (with some exceptions).

I'm guessing you are running into a situation similar to the following:

$(".select2").select2({
  ajax: {}
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css " rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

You can see both Select2 4.0.0 and 3.5.2 are being loaded in the same bin, and 3.5.2 is winning the battle.

But this can be fixed by taking a reference to $.fn.select2 after you load the plugin. You can then either call this function directly (using .call()) or re-set the reference when you need it. I would personally recommend calling the function directly, so other plugins aren't breaking because of you.

myOwnSelect2.call($(".select2"), {
  ajax: {}
});

$(".select3").select2();

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css " rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<script>
  var myOwnSelect2 = $.fn.select2;
  delete $.fn.select2;
</script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css " rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

<select class="select3">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

And using the function directly has the benefit of both Select2 3.x and 4.x working on the same page without any problems.