4

I'm building a jQuery Mobile site for future use with PhoneGap, so all my content is loaded via AJAX pulling data from remote PHP/MySQL stuff

In the home page I initially load only first 10 news; then, with a "More..." button, I load next 10, and so on 'til all records are pulled from database

http://www.media-italia.eu/app/index2.html

Clicking on a news and going back with the "Back" button restore the initial state (first 10 items loaded). That's ok, so far so good

Now comes the tricky part: I'd like an "infinite scroll" on my page, so I leveraged jQuery Waypoints plugin, and this is the result:

http://www.media-italia.eu/app/index.html

Everything seems fine, but here comes a strange thing (please ope the console to see)
When I click on a news, then go back and scroll, the PHP page is called twice, resulting in duplicated items

I've tried a few things (including using .off() before .on()), but no luck at all
Really don't know what the problem might be, please can you help?

I also prepared a downloadable script: http://www.media-italia.eu/app/app.rar

Thank you in advance!!!

Ivan
  • 2,463
  • 6
  • 39
  • 51
  • Sorry, just edited them! (downloadable script was working) – Ivan Mar 19 '13 at 21:50
  • It looks like `data-next` value is not updated when returning back to the page. Because on showing the main page, `more` button appears and gets triggered, so it shows the last 10 news again. – Omar Mar 19 '13 at 22:39

1 Answers1

1

The solution came from plugin author: I had to destroy and recreate the waypoints, so this:

$('#home .content').waypoint(function(direction) {
    if (direction === 'down'){
        $('#next').trigger('click');
    }
}, { offset: 'bottom-in-view' });

Turn into this:

$('#home .content').waypoint('destroy');
$('#home .content').waypoint(function(direction) {
    if (direction === 'down'){
        $('#next').trigger('click');
    }
}, { offset: 'bottom-in-view' });
Ivan
  • 2,463
  • 6
  • 39
  • 51