Re: Django +Ajax + jQuery problem

Hi,

The reason for this is that you are replacing the buttons when you update the answer. The event listener that you attached is on the first one and not the second one.

You can solve this in 2 ways:

1. Reregister the event listener when you have loaded the answer again.

2. Use a different way to add the event listeners in the first place. You can register it this way instead: $('body').on('click', '.upvote', function() {});

Regards,

Andréas

Den tors 2 juli 2020 kl 19:16 skrev Jan Gregorczyk <jnk.gregorczyk@gmail.com>:

My problem is that site registers only the first click on .upvote or .downvote element and ignores next ones.

{% extends 'base.html' %}

{% load votes_exists %}

{% 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 id="answer-{{answer.id}}">

{% votes_up_exists answer request.user.id as is_upvoted %}

{% votes_down_exists answer request.user.id as is_downvoted %}

<i id="upvote-{{answer.id}}" class="upvote{% if is_upvoted %} is-upvoted{% endif %}" data-answer-id="{{answer.id}}">&#8593</i>

<span id="score-{{answer.id}}">{{answer.vote_score}}</span>

<i id="downvote-{{answer.id}}" class="downvote{% if is_downvoted%} is-downvoted{% endif %}" data-answer-id="{{answer.id}}">&#8595</i>

</p>

{% endfor %}

<form method="POST" action="{% url 'answer' 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"></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( function() {

let answerid = $(this).data("answer-id");

$.post("{% url 'upvote' %}", {answer_id:answerid}, function(response) {

/*$("#score-" + answerid).load(window.location.href + " " + "#score-" + answerid);

$("#upvote-" + answerid).load(window.location.href + " " + "#upvote-" + answerid);

$("#downvote-" + answerid).load(window.location.href + " " + "#downvote-" + answerid);*/

$("#answer-" + answerid).load(window.location.href + " " + "#answer-" + answerid);

alert(response);

});

});

$(".downvote").click( function() {

let answerid = $(this).data("answer-id");

$.post("{% url 'downvote' %}", {answer_id:answerid}, function(response) {

/*

$("#score-" + answerid).load(window.location.href + " " + "#score-" + answerid);

$("#upvote-" + answerid).load(window.location.href + " " + "#upvote-" + answerid);

$("#downvote-" + answerid).load(window.location.href + " " + "#downvote-" + answerid);*/

$("#answer-" + answerid).load(window.location.href + " " + "#answer-" + answerid);

alert(response);

});

});

</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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAFyHfE3_EogRCb-2xvGpS6ACDNPbF_JxBLzsfD%3D2XLoBKsJysA%40mail.gmail.com.

--
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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAK4qSCeOLmLxGDSQuEzCN51Pr6%2BRWfwNc8UqvrAAsj_JMQFWEw%40mail.gmail.com.