My AJAX Like button reloads to home page

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 %}

i dont know almost anything about ajax and php (seemed like!!), but i would “reflect” on this matter, and try to figure out these questions:

  • what happens when you go to 1st page
  • which piece of code actually triggers it
  • and why do you think its getting called
  • if its not what you intended can you rewrite it to go with your expected outcome

hope this was helpful, good luck and happy learning :slight_smile: