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:

#: .maintemplatestemplate
msgid "text to be translated_0!"
msgstr "xxxx"