Translating Django into JavaScript files

I tried to localize the js files following the Django documentation, but unfortunately, it's not working as expected. Here is a summary of my setup:

settings.py:

LOCALE_PATHS = (os.path.join(BASE_DIR, 'locale'),)

urls.py in the main project directory:

from django.views.i18n import JavaScriptCatalog
from django.conf.urls.i18n import i18n_patterns

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

I executed the following commands within the directory and it generated .po and .mo files:

django-admin makemessages -l pt_BR

django-admin makemessages -d djangojs -l pt_BR

django-admin makemessages -a

django-admin compilemessages

django.po file:

msgid "Customer"
msgstr "Cliente"

In the HTML template, I am using the following code:

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

console.log( gettext('Customer') );

Unfortunately, the text remains in English and doesn't get translated. Can anyone provide guidance on what might be causing this issue?

Answer №1

Finally, after some troubleshooting, I have successfully resolved the issue at hand. It seems that Django, for some unknown reason (perhaps a feature), compiles the JS translations into the [project-folder]/locale directory instead of the expected [your-app]/locale location. To fix this, simply copy the djangojs.mo file to the [your-app]/locale directory and test if it works for you as well. This simple step did the trick for me.

I've experimented with different parameters in urls.py and other areas, but unfortunately, I could not figure out how to get Django to compile the translation files in the correct directory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate a fresh attribute to the JSON data in an Angular API response

I'm currently working on updating my JSON response by adding a new object property. Below is an example of my initial JSON response: { "products": [{ "id": 1, "name": "xyz" }] } My goal is to include a new object property ca ...

Discovering relative URLs within an MVC 4 framework

Seeking a solution for storing the fully qualified URL of a relative path in MVC: ~/Content/themes/base/jquery-ui.min.css" In my scenario, I have a hidden input field: <input type="hidden" id="siteUrl" value=""/> I attempted to populate this hidd ...

My goal is to exclusively create illustrations of items within a camera's view

Currently, I am using THREEJS to create a dynamically generated 'minecraft' world utilizing a perlin noise generator. Check out the progress so far: Block World Everything is going smoothly except that I am facing significant performance issues ...

Can you explain the functionality of this Observable in the context of this Angular 2 example?

I'm not too familiar with JavaScript/TypeScript and I have a question about how this code snippet works: onGet() { this.serverService.getServers() .subscribe( (servers: any[]) => this.servers = servers, // an array of anythin ...

Display a specific number of page indicators on the Flickity plugin

Currently, I am utilizing the flickity plugin to create a slideshow feature on my website. My goal is to display navigation dots on the images to facilitate user interaction. If you are interested, you can access the plugin through this link: I would lik ...

"Troubleshooting: Fixing the 'Firebase Cloud Function admin reference is not a function'

I recently attempted to transform the .WriteOn cloud function in my Firebase app into a scheduled cloud function. The goal was to create a function that would run every 4 days to delete messages older than 2 days. While this worked well for the .WriteOn fu ...

Seeking assistance with my basic JavaScript/jQuery programming

I have a navigation menu link with an ID #navigation li a and a description with a class .menu-description. I would like to update the class from .menu-description to .menu-descriptionnew whenever a user hovers over #navigation li a. Here is my current jQ ...

Troubles Arise when Initializing Postgres with Docker-Compose

I've been struggling to get a docker-compose file to work properly. It seems like I'm getting closer with each attempt, but I still haven't quite cracked it. Maybe documenting my questions here will help someone else facing similar issues in ...

What is the most efficient method for generating random dark colors using javascript code?

Looking for a function that specifically returns dark colors. Although I can generate random colors with the code below, how do I make sure it only retrieves dark ones? document.getElementById('mydiv').style.backgroundColor = '#' ...

Executing a sequence of jQuery's $.when().then() functions

I am facing challenges in understanding how to properly sequence my functions, especially in relation to the $.when() method. function y() { defer = $.Deferred(); $.when(defer).then(console.log(defer.state())); } y(); <script src="https://ajax.go ...

Customized Box with MaterialUI Styling

Currently, I am utilizing Material UI 5 for my project. To avoid repeatedly defining the same sx prop every time I create a box, I aim to build a custom box component that ensures all boxes have a consistent appearance. Upon going through the documentation ...

Encountering an unexpected token error while building an Angular4 --prod project that involves Three

Encountering an error while trying to build an Angular4 project in production with the following command: node --max_old_space_size=8192 'node_modules/@angular/cli/bin/ng' build --prod --output-hashing=al Error: ERROR in vendor.422622daea37e ...

Upcoming construction: Issue encountered - The Babel loader in Next.js is unable to process .mjs or .cjs configuration files

Within my package.json file, I have set "type": "module" and "next": "^12.2.5". In my tsconfig.json: { "compilerOptions": { "target": "ES2022", "module": "esnext ...

Executing a Databind function using the keypress method in jQuery

On my simple page, I have a repeater being populated by a C# databind method. The page includes a search textbox that performs real-time searching as you type. This functionality is achieved by utilizing the rowfilter in the databind method to filter the r ...

Can someone explain the intention behind using the code snippet {...rest}? I already understand how the three dots spread notation works in React Javascript

I already understand what the three dots spread notation in React Javascript does, so no need to explain. I have been learning ReactJs Javascript and reading code, and I recently came across this CodeSandbox example Within the code, there is: https://i ...

JavaScript: Scroll Through Images Horizontally with Descriptions for Each Image

I am looking to create a horizontal scroller/slider that will display images with captions underneath each image. The data is provided in an array of objects, so I need to iterate through the data and populate each item in the scroller with the necessary i ...

Efficient method for handling numerous AJAX requests

I have a web application that currently makes 14-15 AJAX calls to various APIs. The issue is that the combined time it takes for all the AJAX calls to complete is significantly longer than when I individually type each API's URL into the browser. Cur ...

My Node.Js app refuses to run using my computer's IP address, yet works perfectly with localhost

My Node.js application is set up to listen on port 5050 of my machine: Visiting http://localhost:5050/myapp loads the app successfully. I am using the Express framework, so my listening framework looks like this: var server = app.listen(5050, '0.0.0 ...

TinyMCE Node Replacement Feature

I am working on a WordPress plugin that adds a button to the TinyMCE editor. The intended behavior when the button is clicked is as follows: 1. If the selected text is not part of a shortcode (or is the shortcode itself), then the shortcode should be inser ...

JS problem with using for and foreach loops in Node.js

I've been really stumped by this situation. Everything was running smoothly until 4 days ago when two of my cron daemon jobs suddenly stopped working. Instead of ignoring the issue, I decided to take the opportunity to rebuild and enhance the code. I ...