Django-autocomplete-light: select2 and i18n

[dotmobo]

Hi,

How do you enable i18n for select2 ? I use django-autocomplete-light v3.1.4 and my js console shows me the following message :

Select2: The language file for "./i18n/fr" could not be automatically loaded. A fallback will be used instead.

Thank you for your help

[jpic]

Is select2's translation file loaded by the browser ?

[dotmobo]

My bad. The problem happened because i added the translation file BEFORE adding the select2 file. Thank you :)

[LensHunnel]

Hi,
I've the same issue. select2's translation file is loaded by the browser after select2 file :

I've the following message with or without the select2's translation file:

Select2: The language file for "./i18n/fr" could not be automatically loaded. A fallback will be used instead.

[maratumba]

I have the same problem with 'tr', any solutions to this?

[maximilian]

I believe to have found a solution for this. The problem seems to lie in the fact that the translation file is loaded after all the select2 js files. As a result, the select2 files fail to find the translation file, giving the warning OP is getting. I have found the ideal order for the js files to be loaded are:

1. jquery
2. autocomplete.init.js
3. select2.full.js
4. translation file (e.g. fr.js)
5. select2.js

The library makes use of the media class within the Select2WidgetMixin. The media class specifies the required js files in a "hardcoded" manner so we cannot specify the order they are loaded. We must therefore override the js files being loaded by specifying our own media class. This can be done by adding the "extend=False" attribute to your media class in your form (to not extend the existing library media class) and then manually specifying the order of js files, with your translation file included in the loaded js files (as seen above). You can read more about the Media class and the extend attribute here.

[owen9825]

I overwrote the Media class of the widget, but somehow the language file was being loaded too late and the first form kept suffering the phenomenon of the missing language file. I managed to work around it by loading the necessary JavaScript files in order before any of the forms were rendered.

{% load i18n %}
{% load cache %}
{% load l10n %}

{% get_current_language as LANGUAGE_CODE %}
{% cache 500 autocompletion_language LANGUAGE_CODE %}
    {% if LANGUAGE_CODE != 'en' %}
        <script type="text/javascript" src="{% static 'autocomplete_light/jquery.init.js' %}"></script>
        <script type="text/javascript" src="{% static 'autocomplete_light/autocomplete.init.js' %}"></script>
        <script type="text/javascript" src="{% static 'autocomplete_light/vendor/select2/dist/js/select2.full.js' %}"></script>
        {% with "autocomplete_light/vendor/select2/dist/js/i18n/"|add:LANGUAGE_CODE|add:".js" as language_file %}
            <script type="text/javascript" src="{% static language_file %}"></script>
        {% endwith %}
    {% endif %}
{% endcache %}

[jpic]

Nice one owen, just like in DAL pre-v3 ...

Unfortunately I fail at bundling all our scripts including select2 and all translations with webpack ( #990 ), it would probably require some contribution to select2 to make it easier to bundle, or i'm just doing it wrong (although i have success with other "modern"/"more recent" npm packages).

That said, next time I get sponsor for autocompletion, I will probably rewrite jquery-autocomplete-light with d3js instead of jquery and then move on with #749 so, don't expect much from me until then but as always: contributions are welcome !