CODEWITHSUNDEEP
javascriptdjangointernationalizationdjango-i18n
PhilM
PhilM

Reputation: 361

Django Internationalization - Translation from Javascript handled pop up not picked up

I am using Django Internationalization in my django project.

On one of my page I have some text, which gets translated just fine, and a pop up window which stubornly does not seem to pick up the translation proposed in the po file.

However the translation is present in the po.

Because this pop up window has created problems in the past, I am assuming this is because of the javascript that manages the window to open and close.

I started following this post How to solve the translation/localisation of JavaScript external files since Django does not allow built-it tags in other files?, but I think I am missing something: how do I connect my locale file to the javascript catalog?

  1. project: mysite
  2. app: main

url (project level)

urlpatterns += i18n_patterns(
    path('', include("main.urls")),
    #add for i18n translation for javascript content
    path("jsi18n/", JavaScriptCatalog.as_view(), name="javascript-catalog"),
)

base.html

<script src="{% url 'javascript-catalog' %}"></script>

template (app level) with script

<div class="form-popup" id="myForm{{ model.id }}">
    <form action="{% url 'url' %}" class="show-venue-popup-container" method="post">
        {% csrf_token %}
        <h5 class="show-venue-popup-title">{% translate 'text to be translated_0!' %}</h5>
        <p class="show-venue-popup-text">{% translate 'text to be translated_1' %}</p>
        <button type="submit" class="btn">{% translate 'text to be translated_2' %}</button>
        <button type="button" class="btn cancel" onclick="closeForm('{{ model.id }}')">{% translate 'text to be translated_3' %}</button>
    </form>
</div>

<script>
    // Shows and hides claim window
    // Pop up when user clicks claim starts
    function openForm(modelId) {
        document.getElementById("myForm" + modelId).style.display = "block";
    }

    function closeForm(modelId) {
        document.getElementById("myForm" + modelId).style.display = "none";
    }

    // Pop up when user clicks claim ends
    function displayTab(containerId) {
        const tab = document.querySelector(containerId);
        const isOpen = !tab.classList.contains('hide');

        const allTabs = document.querySelectorAll('.tab-container');
        allTabs.forEach(container => {
            container.classList.add('hide');
            Array.from(container.querySelectorAll('.tab-section')).forEach(section => {
                section.classList.add('hide');
                section.style.display = 'none';
            });
        });

        if (!isOpen) {
            tab.classList.remove('hide');
            Array.from(tab.querySelectorAll('.tab-section')).forEach(section => {
                section.classList.remove('hide');
                section.style.display = 'flex';
            });
        }
    }
</script>

locale/language/django.po:

#: .\main\templates\template
msgid "text to be translated_0!"
msgstr "xxxx"

Upvotes: 0

Views: 20

Answers (1)

PhilM
PhilM

Reputation: 361

I was almost there:

In the documentation (https://docs.djangoproject.com/en/5.0/topics/i18n/translation/) I didnt see the two lines needed to be duplicated in both url patterns:

If your root URLconf uses i18n_patterns(), JavaScriptCatalog must also be wrapped by i18n_patterns() for the catalog to be correctly generated.

so for those like me who cant read, the two lines should be repeated and your code should look like this:

urls.py

urlpatterns = [
        path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
    
    ]
    
    urlpatterns += i18n_patterns(
        path('', include("main.urls")),
        #add for i18n translation for javascript content
        path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
    )

base.html (I put it in the header element)

<script src="{% url 'javascript-catalog' %}"></script>

nothing to change in template file.

then: python manage.py makemessages and python manage.py compilemessages

Upvotes: 0

Related Questions