Develop Reference

Why querySelectorAll is not working on my forms?

I am very new to javascript. I was working on a Django project. In the project, multiple forms are created by Django. I used event listener to all of the forms. Here is my javascript code:
document.addEventListener("DOMContentLoaded",function(){
document.querySelectorAll(`#likeform${posts_id}`).forEach(e =>{
e.addEventListener('submit',(event) => {
event.preventDefault();
like_function();
// return false;
});
});
})
function like_function(){
fetch(`/like/${posts_id}`,{
method:"POST",
body : JSON.stringify({
"is_like" : is_like,
"num_like" : num_like,
})
})
.then(response => response.json())
.then(result => {
if(result.is_like){
console.log("function is liked");
console.log(`${result.is_like} for post ${posts_id}`);
let num_like = result.num_like;
console.log(`Number of posts : ${num_like}`);
document.querySelector(`#likebtn${posts_id}`).innerHTML = "Unlike";
num_like = num_like + 1;
console.log(`Number of posts : ${num_like}`);
document.querySelector(`#num_of_likes_${posts_id}`).innerHTML = `${num_like} `
// location.replace("http://127.0.0.1:8000")
}
else{
console.log("function is unliked, back off!");
console.log(`${result.is_like} for post ${posts_id}`);
let num_like = result.num_like;
console.log(`Number of posts : ${num_like}`);
document.querySelector(`#likebtn${posts_id}`).innerHTML = "Like";
num_like = num_like - 1;
console.log(`Number of posts : ${num_like}`);
document.querySelector(`#num_of_likes_${posts_id}`).innerHTML = `${num_like} `
// location.replace("http://127.0.0.1:8000")
}
})
}
I used querySelectorAll so that all forms work nicely. Unfortunately, only one form works. What goes wrong here?
As everyone is asking where I've defined posts_id in the comments, I'm editing my question and sharing my templates.html file.
templates.html
{% load static %}
<div id="likeapost{{posts.id}}" class="card-footer">
{% if request.user in posts.likepost.all %}
<form action="{% url 'likepost' posts_id=posts.id %}" id="likeform{{posts.id}}" method="POST" style="display: inline;">
<!-- {% csrf_token %} -->
<button id="likebtn{{posts.id}}" class="btn btn-link" type="submit">Unlike</button>
</form>
{% else %}
<form action="{% url 'likepost' posts_id=posts.id %}" id="likeform{{posts.id}}" method="POST" style="display: inline;">
<!-- {% csrf_token %} -->
<button id="likebtn{{posts.id}}" class="btn btn-link" type="submit">Like</button>
</form>
{% endif %}
<small id="num_of_likes_{{posts.id}}" class="num_of_likes">{{ posts.likepost.all.count }}</small>
{% block script %}
<script>
posts_id = "{{ posts.id }}";
is_like = "{{is_like}}";
num_like = "{{ posts.likepost.all.count }}";
</script>
<script src="{% static 'network/controller.js' %}"></script>
{% endblock %}
<button class="btn btn-link" style="text-decoration: none;">Comment</button>
View Post
{% if request.user.id is posts.user.id %}
Edit
{% endif %}
<!-- <div class="likepost"></div> -->
</div>
If I need to share more pieces of code please tell me.

If you want to get all the elements with an id that starts with something, use the following :
document.querySelectorAll('[id^="likeform"]').forEach((e=>{ // ...

infinite scroll working but not doing things as it should

in my web site i want to show the user ratings for that i used the infinite scroll but i am facing one problem.
when it first loads the data before calling the <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> it is showing the star with the count of vote,but when after calling the <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a> it is not showing the star.
my views.py
#login_required
def ratings_user(request,pk):
ratings = VoteUser.objects.filter(the_user_id=pk).order_by('-pk')
paginator = Paginator(ratings, 1)
page = request.GET.get('page')
try:
posts = paginator.page(page)
except PageNotAnInteger:
posts = paginator.page(1)
except EmptyPage:
posts = paginator.page(paginator.num_pages)
return render(request,request.session['is_mobile']+'profile/ratings.html',{'ratings':posts})
html
{% extends 'mobile/profile/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load get_companion %}
{% load cache %}
{% block title %}
Ratings
{% endblock %}
{% block leftcontent %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
{% endblock %}
{% block middlecontent %}
<div class="infinite-container">
{% for i in ratings %}
<div class="infinite-item">
<div class="w3-container w3-card w3-white w3-round w3-margin">
<img src="{{ i.the_user.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:40px;height:40px;border-radius:50%;">
{% with user=i.the_user.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}
<br>
<span class="stars" data-rating="{{ i.vote.vote }}" data-num-stars="5" ></span>
<hr class="w3-clear">
<p>
{{ i.commentaire|linebreaksbr }}
</p>
<span class="glyphicon glyphicon-user"></span> {% with user=i.the_sender.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}
</div>
</div>
{% endfor %}
</div>
{% if ratings.has_next %}
<a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a>
{% endif %}
{% endblock %}
{% block rightcontent %}
{% endblock %}
{% block js %}
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
});
</script>
<script>
//ES5
$.fn.stars = function() {
return $(this).each(function() {
var rating = $(this).data("rating");
var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fas fa-star"></i>');
var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></i>');
$(this).html(fullStar + halfStar + noStar);
});
}
//ES6
$.fn.stars = function() {
return $(this).each(function() {
const rating = $(this).data("rating");
const numStars = $(this).data("numStars");
const fullStar = '<i class="fas fa-star"></i>'.repeat(Math.floor(rating));
const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
$(this).html(`${fullStar}${halfStar}${noStar}`);
});
}
</script>
<script>
$(function(){
$('.stars').stars();
});
</script>
{% endblock %}
i have tried to put the <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> inside the class="infinite-item" but it does not help.what might be the reason for that ? Thanks.

It doesn't look like .stars() will look for new elements being added to the DOM. You should look for a callback function configuration option within Waypoint.Infinite that you can call .stars() on the new elements.

Why is my fetch request being sent multiple times?

I am trying to make it possible to comment on the site. If I post the first comment, it posts fine. If posting the second one, fetch sends 2 requests and displays the same comment 2 times, the third comment 3 requests and displays 3 times, etc. What do I need to do for everything to work?
js
function insertNewComment(data) {
var ul = document.getElementById("new-comment");
ul.insertAdjacentHTML('afterBegin', '<li class="list-group-item">' + data.text + '</li>');
}
function sendComment() {
document.getElementById('comment').addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
fetch(e.target.getAttribute('action'), {
method: e.target.getAttribute('method'),
body: formData
})
.then((response) => {
return response.json();
})
.then((data) => {
insertNewComment(data);
document.getElementById('comment').reset();
});
});
}
html
{% extends 'base.html' %}
{% block other_resources %}
<link rel="stylesheet" href="{{ url_for('.static', filename='css/post.css') }}">
<script src="{{ url_for('.static', filename='js/post.js') }}"></script>
{% endblock %}
{% block content %}
<div class="card">
<img src="{{ post.photo_path }}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.text }}</p>
<p class="card-text"><small class="text-muted">{{ post.created }}</small></p>
<div class="card-header">
Написать комментарий:
</div>
<div>
<form action="{{ url_for('news.add_comment', post_id=post.id) }}" id='comment' method="POST">
{{form.csrf_token}}
<div class="form-floating">
{{form.text(class='form-control')}}
{{form.text.label(for="floatingTextarea2")}}
</div>
{{form.submit(class="btn btn-dark send-comment", onclick='sendComment()')}}
<div class="form-floating">
<label for="floatingTextarea2">Комментарий</label>
</div>
</form>
</div>
<div class="card comments">
<div class="card-header">
Комментарии:
</div>
<ul class="list-group list-group-flush" id='new-comment'>
{% for c in comments %}
<li class="list-group-item">{{ c.text }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endblock %}

Every time you execute sendComment you add another submit listener to that form.
Make sure you only add one listener:
function sendComment(e) {
e.preventDefault();
const formData = new FormData(e.target);
fetch(e.target.getAttribute('action'), {
method: e.target.getAttribute('method'),
body: formData
})
.then((response) => {
return response.json();
})
.then((data) => {
insertNewComment(data);
document.getElementById('comment').reset();
});
};
// add the listener outside of `sendComment`
document.getElementById('comment').addEventListener('submit', sendComment);

Ajax like button not showing increment in count or else

I wanted to add like heart button with like count. I want to use ajax for changing likes count and color change. but when I tried to do that it won't work.
HTML
<div id="posts">
{% for post in page_obj %}
<div><a >{{ post.userp }}</a></div>
<div>{{ post.content }}</div>
<div>{{ post.timestamp }}</div>
<div id="post_name">
{% if request.user in post.userl.all %}
<a class="likeu" style="cursor: pointer"><span id="{{ post.id }}" class="likeu1" style="font-size:24px;color:red">♥</span></a>
{% else %}
<a class="likeu" style="cursor: pointer"><span id="{{ post.id }}" class="likeu1" style="font-size:24px;color:grey">♥</span></a>
{% endif %}
<p id="{{ post.id }}l">{{ post.userl.all.count }}</p>
</div>
<hr>
{% endfor %}
</div>
and JAVASCRIPT
document.querySelectorAll('.likeu1').forEach(element => element.addEventListener('click', change_like));
function change_like(){
post_id = this.id
console.log(post_id)
fetch('/likes', {
method: 'POST',
body: JSON.stringify({
post_id : post_id,
})
})
.then(response => response.json())
.then(result => {
value = result["is_liked"];
console.log(value);
console.log(this);
if (value == 'true'){
this.style.color = 'red';
console.log('red');
}
else{
this.style.color = 'grey';
console.log('grey');
}
})
}
It is updating when I refresh but I want it without refresh.
I don't know what I am doing wrong. please help!

Add Like button with Django + Ajax

Hi I create my first project like stackoverflow(question-answer). I used this guid from Tango with Django http://www.tangowithdjango.com/book17/chapters/ajax.html to add like button with ajax. And nothing hapened. Don't see any request in console. I'm noob in Django, and it's my first encounter with jquery.
apps/questions/models:
class Answer(models.Model):
text = models.TextField()
date = models.DateTimeField(default=datetime.datetime.now)
likes = models.IntegerField(default=0)
resolve = models.IntegerField(default=0)
author = models.ForeignKey(CustomUser)
question = models.ForeignKey(Question)
apps/questions/views:
#login_required
def add_like(request):
ans_id = None
if request.method == 'GET':
ans_id = request.GET['answer_pk']
likes = 0
if ans_id:
ans = Answer.objects.get(id=(int(ans_id)))
if ans:
likes = ans.likes + 1
ans.likes = likes
ans.save()
return HttpResponse(likes)
apps/questions/ulrs:
url:
url(r'add_like/$', views.add_like, name='add_like'),
question.html:
{% for answer in answers %}
<div class="container-fluid no-padding">
{{ answer.text }}
</div>
<div class="container-fluid author-question">
<p>posted: {{ answer.date.day|stringformat:"02d" }}.{{ answer.date.month|stringformat:"02d"}}.{{ answer.date.year}}</p>
<p>by: {{ answer.author.username }}</p>
</div>
{% if user.is_authenticated %}
<button class="btn btn-default" type="button" id="likes" data-ansid="{{ answer.id }}">
like | <strong id="like_count">{{ answer.likes }}</strong>
</button>
{% endif %}
js/ajax.js:
$('#likes').click(function(){
var ansid;
ansid = $(this).attr("data-ansid");
$.get('/questions/add_like/', {answer_id: ansid}, function(data){
$('#like_count').html(data);
$('#likes').hide();
});
});

Since you are creating buttons in a for loop, and naming them the same way, you have multiple elements on the page with the same id. Because of this you get unpredictable results. You should either give each button its own id, or change the jQuery selector to select the buttons based on the appropriate class.
For example, you could have:
{% for answer in answers %}
<div class="container-fluid no-padding">
{{ answer.text }}
</div>
<div class="container-fluid author-question">
<p>posted: {{ answer.date.day|stringformat:"02d" }}.{{ answer.date.month|stringformat:"02d"}}.{{ answer.date.year}}</p>
<p>by: {{ answer.author.username }}</p>
</div>
{% if user.is_authenticated %}
<button class="btn btn-default likes-button" type="button" data-ansid="{{ answer.id }}">
like | <strong id="like_count">{{ answer.likes }}</strong>
</button>
{% endif %}
{% endfor %}
And then for the javascript
$('.likes-button').click(function(){
var ansid;
ansid = $(this).attr("data-ansid");
$.get('/questions/add_like/', {answer_id: ansid}, function(data){
$('#like_count').html(data);
$('#likes').hide();
});
});