So I am using jQuery waypoint to get the image id that is viewed on the screen. But I am having problem with content added by AJAX. When I get to the newly added content by AJAX the plugin doesn't work. Here is my code so far:

Waypoint = $('.Picture-1A').waypoint(function(direction){
    if(direction == 'down'){
        id = $(this.element).children(".PictureID").text();
        $.post('ajax/count-pictures-views.php', {picture_id: id}, function(data){
            Waypoint.refreshAll();
        });
    }
});

I have also tried this instead of Waypoint which did not work. What can I do to make this work?

Recommended Answers

All 8 Replies

I haven't heard of waypoint til now but my first thought would be that elements added after waypoint is initialised don't get included because they weren't part of the DOM at that time.
Is the new content getting added after the page has finished loaded i.e. by user action, or is everthing loaded by the time the document is ready?
It could just be that your waypoint initialisation needs to be the very last thing to occur.

It works with content that is already on the page but when ever I load new content it doesn't work on the new content.

In that case I would say is almost certainly because waypoint scans the DOM at page load only. Items added after that don't get found. Finding out how you can force waypoint to go over the DOM again after those new items are added would solve your problem.

Add it to the $post request. Something like this

$.post('ajax/count-pictures-views.php', {picture_id: id}, function(data)).done(function() {
    Waypoint.refreshAll();
})
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.