I am trying to implement a like button without page refresh in flask, I have studies about xmlhttprequest, and I have successfully made the like button function without page reload. however, I want the total number of likes "{{post.likes.count()}}" in this case to increase by one whenever the user clicks on the like button.
below is my code:
index.html
{% if current_user.has_liked_post(photo) %}
<div class="p-2"><button id="like/{{photo.id}}/unlike" > Unike </button> <span>{{photo.likes.count()}}</span> </div>
</div>
{% else %}
<div class="p-2"><button id="like/{{photo.id}}/like"> Like </button> </button> <span id="count">{{photo.likes.count()}}</span>
</div>
{%endif%}
index.js
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('button').forEach(button => {
button.onclick = () => {
const request = new XMLHttpRequest();
request.open('POST', `/${button.id}`, true);
request.onload = () => {
const response = request.responseText;
document.getElementById('count').innerHTML = response;
};
request.send();
};
});
});