...
{% for thread in threads %}
...
<span class="rating">
<span class="rating-plus" data-id="{{ thread.id }}">+</span>
<span class="rating-value" data-id="{{ thread.id }}">{{ thread.rating }}</span>
<span class="rating-minus" data-id="{{ thread.id }}">−</span>
</span>
...
{% endfor %}
...
zpshch
|-- manage.py
|-- zpshch
| |-- __init__.py
| |-- settings.py
| |-- urls.py
| |-- wsgi.py
|-- mainapp
| |-- __init__.py
| |-- models.py
| |-- forms.py
| |-- views.py
| |-- admin.py
| |-- templates
| | |-- base.html (базовый шаблон)
| | |-- home.html (домашняя страничка)
| | |-- board.html (страничка с разделом форуме)
| |-- statis
| | |-- js
| | | |-- jquery-1.9.1.min.js (сторонняя библиотека JQuery)
| | | |-- main.js (наш файл со скриптами)
Добавляем скрипты ко всем страничкам.
<html>
<head>
<title>ЗПШЧ: {% block title %}без название{% endblock %}</title>
<meta charset="utf8">
<link rel="stylesheet" href="{{ STATIC_URL }}css/main.css">
<script src="{{ STATIC_URL }}js/jquery-1.9.1.min.js"></script>
<script src="{{ STATIC_URL }}js/main.js"></script>
</head>
...
$(document).ready(function() { // когда страница загрузится
$('.rating-plus').click(function() { // повесить на все классы rating-plus функцию-обработчик клика
changeRating(+1, $(this).attr('data-id')); // функция-обработчик вызывает функцию changeRating
// вторым параметром передается id того комментария, который лайкают
});
$('.rating-minus').click(function() {
changeRating(-1, $(this).attr('data-id'));
});
});
function changeRating(delta, thread_id) {
$.post('/change_rating/', // отправляем post-запрос на сервер
{
'thread_id': thread_id, // в запросе передаём два параметра
'delta': delta
}, function (data) { // обрабатываем ответ сервера, заменяя количество лайков на новое
$('.rating-value[data-id="' + thread_id + '"]').text(data.new_rating);
}
)
}
url(r'^change_rating/$', 'mainapp.views.change_rating', name='change_rating'),
def change_rating(request):
# ajax POST request
thread_id = request.POST['thread_id']
delta = int(request.POST['delta'])
t = Thread.objects.get(id=thread_id)
t.rating += delta
t.save()
return HttpResponse(json.dumps({
'new_rating': t.rating,
}), mimetype='application/json')