I have set up a category-page with Infinite Scroll set up and working. But then i have category filter-buttons that fetches the posts for that category only via Ajax. This gives me two problems:
1). Infinite scroll will only work once, it won´t load any more posts after I click the category filters. How can I "reactivate" Infinite scroll to get more posts after, say a click event?
2). How do I tell Infinite Scroll witch category to fetch the posts from after I click a category filter-button?
This is the code for the category filter buttons:
$(document).ready(function() {
// Settings
var speed = 500;
var easing = 'easeInExpo';
// Click handler
$(".filter a").click(function() {
var cat = $(this).attr("id");
$('.posts .post').fadeOut(speed, easing, function() {
$(this).remove();
});
$('.filter li.active').removeClass('active');
$(this).parent('li').addClass('active');
// Ajax call
$.get('/ajax-utbildningar/?category='+cat, function(data) {
// Append content
$('.posts').html(data);
// Grid-a-licious
settings.animateUpdate = true;
$(".grid").grid(settings);
settings.animateUpdate = true;
});
return false;
});
});Here´s a link to the test-site:
http://karriarihandeln.se.loopiadns.com/utbildning/
