How to pass Django template variable to JavaScript function

Question

I passed personal information in js file using views.py. So, In the js file, I added the Django template for loop to iterate the personal information and pass the javascript function. but it's not working for me. I am new in this concept.

View file

def sample(request):
    p=[]
    p.append({name:santhosh, age:20},name:kumar, age:21})
    return render(request, 'index.js',{'p':p})

index.js

{% for i in p %}
    var data = load_html(i)
{% endfor %}

function load_html(i){
    return '<h1>{{ i.name }}</h1>'
}

This is my sample code. I tried to pass (i value in load_html()) function. but it cannot pass the value in that function. How to pass value and get name.

mursalin · Accepted Answer · 2020-06-30 14:31:57Z

1

Your Django template is constructed in server site and javascript is a client side language. So in simple term You can't send Django template variable to javascript function.

however there is a workaround. You can add your Django variable value as attribute. like for example

<span id='elId' userName="{{p.name}}" userAge="{{p.age}}"></span>

and in your script section with jQuery or js you can get those attribute value and use as per requirements.

var $x = $("#elId");
alert($x.attr("userName"));

its not pretty, but it works.

answered Jun 30, 2020 at 14:31

mursalin

1,1811 gold badge7 silver badges18 bronze badges

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

Comments

DragonFire · Accepted Answer · 2022-08-25 05:13:14Z

0

Do the follwing, notice in the template the use of single quotes while passing function variable.

In Template

 <a href="#" class="some_class" onclick="someFunction('{{ row.item_id }}');">Do Something</a>

In Jquery

function someFunction(item_id) {
    alert(item_id) }

answered Aug 25, 2022 at 5:13

DragonFire

4,1222 gold badges41 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to pass Django template variable to JavaScript function

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