Django - SyntaxError when using {{ }} and {% %} tags in javascript function

Question

I followed the tutorials on Django website and tried to create cascading drop down lists at the results.html from the Django website's tutorials.

I have encountered a Syntax error when I use Django tags {{ }} and {% %} in javascript function. The IDE I used is Komodo Edit and it highlighted this line {% for item in question.choice_set.all %} as red and stated an error: Javascript: SyntaxError: expected expression, got '%'.

I would like to ask that how can I fix this?

Thank you very much! and as below is my html script.

results.html

<!doctype html>
<html>
<body>
<script type="text/javascript">
        function change(chosen,updateList){
            document.getElementById('text').value = chosen;
            updateList.options.length=0;
            {% for item in question.choice_set.all %}
                if (item = chosen) {
                    updateList.options[updateList.options.length] = new Option({{item.votes}}, '')
                }
            {% endfor %}
        }
</script>
<form name='form' action="{% url 'polls:results' quezstion.id %}", method='post'>
    {% csrf_token %}
    <h1>{{ question.question_text }}</h1>
    <select name="Choice" onchange="change(document.form.Choice.options[document.form.Choice.selectedIndex].value, document.form.Votes)">
        {% for item in question.choice_set.all %}   //question used here is defined in views
        <option value="{{item.id}}">{{ item.choice_text }}</option>
        {% endfor %}
    </select>
    <select name="Votes">
        <option></option>
    </select>
</form>

Try searching stackoverflow or google for simliar answers: stackoverflow.com/questions/6008908/… — taesu
– taesu, Commented May 20, 2015 at 4:31
hi taesu, i read this before posting the question. It shows the same syntax error :) — Fallon19
– Fallon19, Commented May 20, 2015 at 4:51
Just to understand, this is an error form the IDE only? Does this work properly apart from that? It looks ok at first glance. — Wtower
– Wtower, Commented May 20, 2015 at 7:47

madzohan · Accepted Answer · 2015-05-20 06:56:46Z

0

If you want use data from your view in embedded js you have to serialize this data manually in your view (for example how I implemented it in my project):

get_context_data from CBV: (django 1.6 python 2.7)

 import json
 from django.utils.safestring import mark_safe
 # ...

 def get_context_data(self, **kwargs):
    context = super(LargeMapView, self).get_context_data(**kwargs)
    human_values = Human.objects.values(
        'pk', 'fio',
        'lat_deg', 'lat_min', 'lat_sec',
        'lon_deg', 'lon_min', 'lon_sec',
    )

    context['human_data'] = mark_safe(json.dumps(list(human_values), ensure_ascii=False))

    return context

part of template:

 <script>window.jQuery || document.write('<script src="{% static 'js/jquery-1.11.1.min.js' %}"><\/script>')</script>

 <script type="text/javascript">
    var humanList = {{ human_data }};

    $.each(humanList, function (index, human) {
            var coords = getCoords(
                human['lat_deg'], human['lat_min'], human['lat_sec'],
                human['lon_deg'], human['lon_min'], human['lon_sec']
            );
    });
 </script>

answered May 20, 2015 at 6:56

madzohan

11.8k9 gold badges43 silver badges68 bronze badges

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

3 Comments

Wtower Over a year ago

This is nice, I can't get a grasp on how this helps the error in question though.

madzohan Over a year ago

@Wtower I have replaced {% for ... %} {% endfor %} with $.each (maybe then I had faced with the same problem ... so you can call it "workaround") ... also answered to the next possible question of TS about serializing :)

Fallon19 Over a year ago

@madzohan, Hi! I am able to pass data from my view to html and display it. Thanks for the solution!

Collectives™ on Stack Overflow

Django - SyntaxError when using {{ }} and {% %} tags in javascript function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related