How do i load javascript code with django tags into my django template

Question

Situation: I'm using Django 1.9. And i have a javascript loop that takes some javascript stored in database. This js has some django tags that i want to load when that js is loaded into my template. This is the function:

{% extends "base_clean.html" %}
{% load i18n %}
{% block title %}{% trans "Campaign" %} - {{ campaign.name }}{% endblock %}

{% block content %}


Some HTML

Some CSS

<script type="text/javascript">

Some javascript functions.

displayed = 0;
delay = 1000;
(function loop() {
   setTimeout(function() {
   p = pq.getMessage()
   if( p != false ) {
      posthtml = get_message_html(p);
      displayed++;

       {{ display_style.layout.js|safe }} /* !!!!!!!!!!!!!!!!!!*/


   if( pq.messagesCount() < 10 ){
      pq.getMessages()
   }
   loop();
 }, delay);
})();
</script>
{% endblock %}

And this is what {{ display_style.layout.js|safe }} load:

setTimeout(function() {
        $('#messages_container').append(posthtml);
        {% if display_style.post_append_effect %}
          $(posthtml).addClass("animated {{ display_style.post_append_effect.css }}");
        {% endif %}
      }, 900);
    }

    if(displayed == {{ display_style.messages_per_page }}){
        delay = {{ display_style.seconds_between_messages }}000;
    }

    if(displayed > {{ display_style.messages_per_page }}){
      $target = $('#messages_container div.list-group-item').first()
      {% if display_style.message_remove_effect %}
        $target.removeClass("animated {{ display_style.post_append_effect.css }}")
        .addClass("animated {{ display_style.post_remove_effect.css }}");
      {% endif %}
      setTimeout(function() {
        $target.remove();
        displayed--
      }, 900);

    }

As you can see it has some django tags that i also want to render. But i've got "Uncaught SyntaxError: Unexpected token %"

EDIT: Added django header tags. and structure of the templates And forgot to say that if i write explicitly the js that i want to render to my template it works... problem is trying to render tags into the rendered js

The issue isn't in the code you're showing, but you aren't showing everything. Please show the rest of your template and the rest of the error trace. — YPCrumble
– YPCrumble, Commented May 20, 2016 at 17:12
Ok, I'll simplify the template file because is very big.. ill just put what its involved here. And about the error trace its just that... i mean, chrome dev tools put an error at the first "{% if display_style.post_append_effect %}" — Ctrl 4
– Ctrl 4, Commented May 20, 2016 at 17:24

Community · Accepted Answer · 2017-05-23 12:32:02Z

2

I think the issue is that you're loading a second template as a text string rather than using Django's include template tag. Try changing {{ display_style.layout.js|safe }} to {% include "display_style.layout.js" %} and any syntax error should become more apparent.

You should also consider using Django's staticfiles to load your javascript rather than including javascript in your template. Then per this answer you can simply define the variables you want to pass to your javascript in a <script> tag that you can reference in your javascript file. Something like:

Django template

{% load staticfiles %}
<!-- Some html -->
<script>
    var displayStyle = {{ display_style }};
</script>
<script type="text/javascript" src="{% static 'your_js_file.js' %}"></script>
<!-- Rest of your HTML -->

JS file loaded via staticfiles

var displayStyle = window.displayStyle || null;
if (displayStyle) {
    // Your code here.
}

Last, one possibility for the specific error is that your included template has a % character somewhere. This would need to be escaped as %% in the django templating system.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered May 20, 2016 at 17:40

YPCrumble

29.1k26 gold badges115 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ctrl 4 Over a year ago

I'll try the staticfiles way. I'm still unable to load "dynamically" the js.. I gotta say what is the purpose of this and maybe you can have a hint on what should i do. It must take html, css and javascript of a layout for showing messages. So i shoul be able to "plug" and "unplug" attached html/css/js that the layout has. I've already did html and css part. Problem is in the js PS: Thanks @YPCrumble for answer

YPCrumble Over a year ago

@Ctrl4 you shouldn't have to "unplug" the javascript - most likely there's a way to make the same JS code work for different iterations of your html. One more question - don't you have an extra } on the fifth line of that code after the first setTimeout function?

Ctrl 4 Over a year ago

Actually i was thinking all bad... I was mixing django templates with mustache js but i was "unplugging" the js in a bad way. As you saw i had an extra } but it was part of this missthinking of mine. I did it and was thanks to your answer about using static files.

Collectives™ on Stack Overflow

How do i load javascript code with django tags into my django template

1 Answer 1

Django template

JS file loaded via staticfiles

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Django template

JS file loaded via staticfiles

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related