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 <[email protected]>
> 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 <[email protected]
> <mailto:[email protected]>> 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 [email protected]
> <mailto:[email protected]>.
> 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 [email protected]
> <mailto:[email protected]>.
> 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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/90860370-CBA8-4209-B5CF-52AE8609D9DA%40melindaminch.com.
