javascript django html tags

Question

var articles = [
    {% for article in article_list %}
        {% if not forloop.first %},{% endif %}
        {
            title: "{{ article.title }}",
            slug: "{{ article.slug }}",
            content: "{{ article.content }}",
            authors: [
                {% for author in article.authors.all %}
                     {% if not forloop.first %},{% endif %}
                     {
                     first_name: "{{ author.first_name }}",
                     last_name: "{{ author.last_name }}",
                     }
                {% endfor %}
            ]
        }
    {% endfor %}
    ]
]
$('#calendar').fullCalendar('addEventSource',articles);

This is code located in calendar-conf-events.js(fullcalendar), and cause error I passing objects to index.html ( which use calendar-conf-events.js ) And, In JS I use objects and template tags, but error

Error is : "identifier or string literal or no numeric literal expected" Cause at {%

Is this in a .js file? If so you cannot use template tags in a .js file. You can move your javascript code into an .html Django template and wrap the javascript in <script></script> tags. — elethan
– elethan, Commented Oct 4, 2016 at 2:48

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You cannot use template tags in a .js file like this.

The way I personally have handled this type of situation is to move my JS code into a Django template, and wrap it in <script></script> tags:

<script>
var articles = [
    {% for article in article_list %}
        {% if not forloop.first %},{% endif %}
        {
            title: "{{ article.title }}",
            slug: "{{ article.slug }}",
            content: "{{ article.content }}",
            authors: [
                {% for author in article.authors.all %}
                     {% if not forloop.first %},{% endif %}
                     {
                     first_name: "{{ author.first_name }}",
                     last_name: "{{ author.last_name }}",
                     }
                {% endfor %}
            ]
        }
    {% endfor %}
    ]
]
$('#calendar').fullCalendar('addEventSource',articles);
</script>

It sounds like you might be able to move this code into index.html if that is where you are accessing articles.

Update:

Since your JavaScript uses jQuery, make sure to load that library ahead of time the same way you would do it elsewhere. For example, you could add the following inside your <head></head> tags at the top of your template:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 4, 2016 at 2:53

elethan

17.1k10 gold badges70 silver badges97 bronze badges

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

1 Comment

jkh6100 Over a year ago

thank you, But "$('#calendar').fullCalendar('addEventSource',articles); " Cause Error "(index):363 Uncaught ReferenceError: $ is not defined"

Collectives™ on Stack Overflow

javascript django html tags

1 Answer 1

Update:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related