Pass in Django Template Variable to JS function

Question

In one of my templates, I have a for loop that goes over all the items. When a person likes or dislikes an item, I want to handle that with my function. Setting the button's HTML to something like this works:

            <button onclick='update_like(arg1, arg2)'></button>{{ item.id}}

However, I need to pass my template variables to the function. So I tried something like this:

            <button onclick='update_like({{item.id}}, {{item.name}})'></button>{{ item.name}}

But clicking the button just ouputs: Uncaught SyntaxError: Unexpected token 'default'

This is a trimmed down version of the full template I'm using:

{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="list">
    {% for item in items %}
               <button onclick='update_like({{item.id}}, {{item.name}})'></button>{{ item.name}}
    {% endfor %}
</div>

 <script>
 var count = {};
 function update_like(item_id, item_name) {
     count[item_id] = 1;
     console.log(count);
     return; 
 }
 </script>
{% endblock %}

Phuong Vu · Accepted Answer · 2020-07-03 03:48:51Z

2

Assuming item.id is number, item.name is string. You have to quote your value like this:

<button onclick="update_like({{item.id}}, '{{item.name}}')"></button>{{ item.name}}

To make sure above code is safe: replace ' to \' (by a custom filter) in item.name or not allow single quote in item.name

answered Jul 3, 2020 at 3:48

Phuong Vu

5374 silver badges16 bronze badges

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

1 Comment

Johnny Over a year ago

worked, thanks! So in my actual code I was only passing in the auto generated id field, not the name, but it still erring out. My migrations files showed the ID field was being created as an autofield, and according to django doc here: docs.djangoproject.com/en/3.0/ref/models/fields autofield is an IntegerField, but I still needed to escape it the way you have in your answer

Collectives™ on Stack Overflow

Pass in Django Template Variable to JS function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related