Django JavaScript Translation gettext is not defined

Question

My javascript function contains the following:

document.getElementById("example").innerHTML = gettext("This is an example");

My urls.py looks like:

urlpatterns = [
    url(r'^jsi18n/$', JavaScriptCatalog.as_view(), name='javascript-catalog'),
    url(r'^admin/', admin.site.urls),
    url(r'^', include('project.urls')),
    url(r'^login/$', auth_views.login, {'template_name': 'login.html', 'authentication_form': LoginForm}, name = 'login'),
    url(r'^logout/$', auth_views.logout, {'next_page': '/login'}),
    url(r'^i18n/', include('django.conf.urls.i18n')),
]

And in my template I have:

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

The translation above using gettext() does not work. A Reference Error comes up saying gettext() is not defined. However, in the same javascript file i have:

var monthNames =  [gettext("January"), gettext("February"), gettext("March"), gettext("April"), gettext("May"), gettext("June"), gettext("July"), gettext("August"), gettext("September"), gettext("October"), gettext("November"), gettext("December")];

And that does not prompt a reference error. The month translations work but the example one does not.

Answer 1

I am not sure, but try checking the order of your script. See, if you are using the gettext() function for the example above before the script tag where you load the javascript-catalog.

Answer 2

I literally had the same exact issue, even when I had the script tag come before the gettext().

The simple fix was to make sure the catalog came before the app in urlpatterns:

urlpatterns = [

    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
     ...
    <your app>
]

Answer 3

Here is complete guideline to add Admin Date Picker in Front end.

forms.py

from django.contrib.admin import widgets
from django import forms
from .models import Student

class StudentForm(forms.ModelForm):

    class Media:
        css = {
            'all': (
                '/static/admin/css/widgets.css',
            )
        }
        js = [
            # '/admin/jsi18n/',
            '/static/admin/js/core.js',
        ]
    
    class Meta:
        model = Student
        fields = [
            "first_name",  
            "last_name", 
            "birth_date", 
        ]
        widgets = {
            'birth_date': widgets.AdminDateWidget()
        }

urls.py

from django.views.i18n import JavaScriptCatalog
from django.urls import path

urlpatterns = [
    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
]

add_student.html

<form action="{% url 'some_url' %}" method="post">
    {% csrf_token %}
    <table>
        {{ form.as_table }}
    </table>
    <input type="submit" value="Submit">
</form>

<script type="text/javascript" src="{% url 'javascript-catalog' %}"></script>
{{ form.media }}

Answer 4

<script src="/jsi18n/"></script> 

add this before jquery block. Hope this might help