JS send html with django tags

Question

I am cretaing widget in JS. And I want to send html through jquery.html() method. But I am using also django trans tag.

This is my after cretating widget code on html side:

<div class="modal-header" style="padding: 5px;padding-left: 25px;">
    <h5 class="modal-title" id="componentName">{% trans "Report" %}</h5>
</div>

And this is my code on JS side

html = '<div class="modal-header" style="padding: 5px;padding-left: 25px;">'+
      '<h5 class="modal-title" id="'+IdCreateHelper(component_names[i])+'">'+'{% trans "'+component_names[i]+'" %}'+'</h5>'+
'</div>'

$('#'+modal_id).html(html);

I want to create django tags on JS side but result is:

{% trans "Reports" %}
<h5 class="modal-title" id="componentName">{% trans "Report" %}</h5>

I want to create django tags in js

You'll need the js within the django template rather than as a separate js file — HenryM
– HenryM, Commented Jul 19, 2019 at 10:38

lorenzo · Accepted Answer · 2019-07-19 12:26:14Z

I think that the cleanest solution is pass a JSON object in your DOM using the Django template context.

So, step by step:

Create your translations server side:

from django.utils.translation import gettext as _

translations = {
    'report': _('Report')
}

Pass them to the context:

return render(request, 'mytemplate.html', context={'translations': translations})

Now, if you are using Django > 2.1.X you can render your translations in the template using this filter https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#json-script:

{{ translations|json_script:"my-translations" }}

Now you can access your translations everywhere from your JS:

var translations = JSON.parse(document.getElementById('my-translations').textContent);
console.log(translations.report)

This is a very scalable solution for all your translations, with future words to translate growing and growing...

Hagyn · Accepted Answer · 2019-07-19 10:52:58Z

2

What you have to do is translate the string in server side, you can do it with the following code:

from django.utils.translation import gettext as _

html = '<div class="modal-header" style="padding: 5px;padding-left: 25px;">' + 
'<h5 class="modal-title" id="' + IdCreateHelper(component_names[i]) + '">' + 
_(str(component_names[i])) +'" %}'+'</h5>'+'</div>'

answered Jul 19, 2019 at 10:52

Hagyn

9827 silver badges14 bronze badges

Collectives™ on Stack Overflow

JS send html with django tags

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related