Hi so i have made a like button function using ajax and python as the backend.
Now it works perfectly but the only problem is that i load my images as I SCROLL DOWN (lazy Load)
so first 6 images appear and as you scroll down, other 6 more appear and then so on.
so when i click the like button of first 6 images, it works fine, but as soon as i Scroll down and like the other 6, it takes me back to the 1st page.
I have tried changing the form , but still get problems, Please help.
MY JS LAZY LOAD FILE:
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
offset: 'bottom-in-view',
onBeforePageLoad: function () {
$('.loader').show();
},
onAfterPageLoad: function ($items) {
$('.loader').hide();
}
});
MY LIKE BUTTON JS FILE:
const likeUnlikePosts = ()=> {
const likeUnlikeForms = [...document.getElementsByClassName('like-unlike-forms')]
likeUnlikeForms.forEach(form=> form.addEventListener('submit', e=>{
e.preventDefault()
const clickedId = e.target.getAttribute('data-form-id')
const clickedBtn = document.getElementById(`like-unlike-${clickedId}`)
$.ajax({
type: 'POST',
url: "/like-unlike/",
data: {
'item-id': clickedId,
},
success: function(response){
console.log(response.likes)
clickedBtn.textContent = `${response.likes} likes`
},
error: function(error){
console.log(error)
}
})
}))
}
likeUnlikePosts()
MY HTML TEMPLATE:
<div class="flexbox-container infinite-container">
{% for item in prods %}
<form class="like-unlike-forms" data-form-id="{{item.id}}">
<button id="like-unlike-{{item.id}}" name = "item-id" value = "{{item.id}}" class = 'btn btn-primary btn-sm'> {{item.no_of_likes}} Like </button>
</form>
<a href="/{{item.slug}}" target="_blank"><b>£{{item.price}}</b></div></a>
{% endfor %}
{% if prods.has_next %}
<a class="infinite-more-link" href="?page={{ prods.next_page_number }}">More</a>
{% endif %}
<div class="loader"></div>
</div>
{% endblock content %}