Hello!
To answer the question about template tags in javascript, i.e. $.post("{% url
'upvote' %}", {answer_id:answerid}) I
This works when your js is written in the template, as you have it, but if you
ever want to move that JavaScript into a separate .js file, it will break.
That’s because right now your file is being run through the Django templating
engine, but a stand-alone js file wouldn’t be. What I usually do is put a data
attribute on a convenient element and then get it in the way that Stephen
suggests below.
So I would have <i class="upvote” data-answer-id="{{answer.id}}” data-url="{%
url 'upvote' %}", {answer_id:answerid"}>↑</I> in my html, and then in my
javascript, something like this:
$(".upvote").click( function () {
let answerid = $(this).data("answer-id");
console.log(answerid);
$.post($(this).data(“url’), {answer_id:answerid});
});
Good luck, hope this helps!
Melinda
> On May 31, 2020, at 1:26 PM, Stephen J. Butler <stephen.but...@gmail.com>
> wrote:
>
> This isn't a jQuery issue, it's a JavaScript/ECMAScript issue. When you use
> the "arrow function" style like "() => { ...code... }" then certain variables
> are not bound into the function contact, including "this".
> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
>
> <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions>
>
> To get "this" inside your event handler you need to use "function () {
> code... }".
>
> $(".upvote").click( function () {
> let answerid = $(this).attr("answer-id");
> console.log(answerid);
> $.post("{% url 'upvote' %}", {answer_id:answerid});
> });
>
> But also, it's bad bad form to define your own attribute names on HTML. Use
> the "data-answer-id" attribute name to do this, and in your code access it
> with $(this).data("answer-id").
>
> On Sun, May 31, 2020 at 2:19 PM Jan Gregorczyk <jnk.gregorc...@gmail.com
> <mailto:jnk.gregorc...@gmail.com>> wrote:
> I have a problem with Ajax and Django templates. I'm new to Ajax and jquery.
> Console log at the end of the script prints undefined. I don't know why let
> answerid = $(this).attr("answer-id"); doesn't extract attribute from this
> line: <i class="upvote" answer-id="{{answer.id
> <http://answer.id/>}}">↑</i>
> I also want to know if using template tags in javascript scripts like here
> $.post("{% url 'upvote' %}", {answer_id:answerid}) is a good idea.
>
>
> {% extends 'base.html' %}
> {% block title %}{{question.title|truncatechars:52}}{% endblock %}
> {% block content %}
> <h1>{{question.title}}</h1>
> <p>{{question.content}}</p>
> {% for answer in question.answers.all %}
> <h3>{{answer.author}}</h3>
> <p>{{answer.content}}</p>
> <p>
> <i class="upvote" answer-id="{{answer.id
> <http://answer.id/>}}">↑</i>
> {{answer.votes.count}}
> <i class="downvote" answer-id="{{answer.id
> <http://answer.id/>}}">↓</i>
> </p>
> {% endfor %}
> <form method="POST" action="{% url 'answer' question.id <http://question.id/>
> %}">
> {% csrf_token %}
> {{form.as_p}}
> <input type="submit" value="Odpowiedz">
> </form>
> {% endblock %}
> {% block javascript %}
> {% load static %}
> <script
> src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js
> <https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js>"></script>
> <script>
> //upvote and downvote script
> var csrftoken = window.Cookies.get('csrftoken');
> function csrfSafeMethod(method) {
> // these HTTP methods do not require CSRF protection
> return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
> }
> $.ajaxSetup({
> beforeSend: function(xhr, settings) {
> if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
> xhr.setRequestHeader("X-CSRFToken", csrftoken);
> }
> }
> });
> $(".upvote").click( () => {
> let answerid = $(this).attr("answer-id");
> console.log(answerid);
> $.post("{% url 'upvote' %}", {answer_id:answerid});
> });
> </script>
> {% endblock %}
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users+unsubscr...@googlegroups.com
> <mailto:django-users+unsubscr...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/aa129ea5-dd3d-402f-a297-796b408e8217%40googlegroups.com
>
> <https://groups.google.com/d/msgid/django-users/aa129ea5-dd3d-402f-a297-796b408e8217%40googlegroups.com?utm_medium=email&utm_source=footer>.
>
> --
> You received this message because you are subscribed to the Google Groups
> "Django users" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to django-users+unsubscr...@googlegroups.com
> <mailto:django-users+unsubscr...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/django-users/CAD4ANxVDepam-GZ_nOBKoD9fff7aPE9ic5Et-VxJvw85vqEQrQ%40mail.gmail.com
>
> <https://groups.google.com/d/msgid/django-users/CAD4ANxVDepam-GZ_nOBKoD9fff7aPE9ic5Et-VxJvw85vqEQrQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.
--
You received this message because you are subscribed to the Google Groups
"Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to django-users+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/90860370-CBA8-4209-B5CF-52AE8609D9DA%40melindaminch.com.
