How can I pass a Django template context variable to JS function

Question

I am trying to create a simple web link toggle for following or unfollowing a question in my app. I got close using the info My Own Like Button: Django + Ajax -- How? but am not quite there.

My problem is that I cannot dynamically pass question.id to my JS function as the answer in the above link implies. Ie

The hard-wired JS code below DOES work. It passes '12' as a valid param for the view tied to /question/follow-unfollow-inline/. But when I try to replace '12' with a context variable '{{ question.id }}' from the template that calls this JS code, my function passes the string '{{ question.id }}' back to /question/follow-unfollow-inline/ rather than it's value. How do I fix this?

$(function () {
    $("#follow_unfollow_toggle").click(function () {
        $.ajax({
            type: "POST",
            url: "/question/follow-unfollow-inline/",
            data: { 'qid': '12' },
            success: function (e) {
                alert('Success!');
            }
        });
    });
});

For now, I'm using @csrf_exempt on my view, but I know I should pass it as data.

Hi. Not sure if this answers your question but when in Debug mode, all my static files are served by Django. Otherwise Amazon S3. — user2916527
– user2916527, Commented Feb 11, 2014 at 23:57
So insert the js directly into my template vs. calling from an external js file? — user2916527
– user2916527, Commented Feb 12, 2014 at 1:36
I tried that. It works if you only have one question to follow/unfollow, but I have a list of them. If I place my JS inside my loop, it works for the first question in the list only. If I place the JS outside the loop, I lose the content of the current question id. — user2916527
– user2916527, Commented Feb 12, 2014 at 2:12

Sam Dolan · Accepted Answer · 2014-02-12 04:06:45Z

2

You could define it on your anchor tag with data- attribute:

Template:

<a id="follow_unfollow_toggle" href="#" data-qid="{{ question.id }}">Like</a>

Js file:

$(function () {
    $("#follow_unfollow_toggle").click(function () {
        $.ajax({
            type: "POST",
            url: "/question/follow-unfollow-inline/",
            data: { 'qid': $(this).data('qid') },
            success: function (e) {
                alert('Success!');
            }
        });
    });
});

answered Feb 12, 2014 at 4:06

Sam Dolan

32.6k10 gold badges93 silver badges84 bronze badges

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

1 Comment

user2916527 Over a year ago

Thanks @dolan that worked great. I also realized I needed to change id="follow_unfollow_toggle" to class="follow_unfollow_toggle" so that my JS function fires for any question in my list of questions, not just the first.

Collectives™ on Stack Overflow

How can I pass a Django template context variable to JS function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related