I'm using Infinite AJAX Scroll plugin to load series of posts, similarly to a blog.
I want to use the plugin's very neat history feature to load both older and newer posts. There will be too many posts and it is not feasible to update the url list in each post's code individually so I figured out I could load it by a PHP include function.
In first.html
I load the list using PHP include function:
<div id="pagination">
<a href="first.html" id="first">1</a>
<a href="second.html" id="second">2</a>
<a href="third.html" id="third">3</a>
....
</div>
and specify the next post in the code next: '#second'
:
var ias = jQuery.ias({
container: '#posts',
item: '.post',
pagination: '#pagination',
next: '#second'
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension({ prev: '' }));
In second.html
the list is identical (loaded using PHP) and the script is changed to prev: '#first'
and next: '#third'
:
var ias = jQuery.ias({
container: '#posts',
item: '.post',
pagination: '#pagination',
next: '#third'
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension({ prev: '#first' }));
The problem is that the script doesn't update after a new post has been loaded so it keeps loading the same post over and over again. If I open first.html
the script keeps loading second.html
, second.html
etc. If I open second.html
the script keeps loading third.html
, third.html
etc. Is there a way to reload the script from the new file?