[Plugin: Infinite Scroll] How do I reactivate inf-scroll after an Ajax-call?

  • 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:
    https://karriarihandeln.se.loopiadns.com/utbildning/

    https://www.ads-software.com/extend/plugins/infinite-scroll/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor beaver6813

    (@beaver6813)

    I’m not quite sure what you mean by category filter button? Do you mean the second-level links on the navigation along the top?

    If so then could you give the link to the exact page its not working on? When I click one of those links it just takes me to:
    https://karriarihandeln.se.loopiadns.com/category/utbildning/elevbloggen/
    For example, which infinite-scroll seems to work on?

    Thread Starter MikaelLarsson

    (@mikaellarsson)

    Sorry, I think you got the wrong link. This is the right one: https://karriarihandeln.se.loopiadns.com/category/utbildning/

    Take a look at the buttons below the label that says: ‘Visa’. Thanks.

    Plugin Contributor beaver6813

    (@beaver6813)

    Sorry for the wait, from the code above it looks like you’re removing the existing content before you load the new, which is fine. But you’ll need to re-initiate infinite-scroll each time (after you append/grid-a-licious etc). Let me know if you need further advice.

    Thread Starter MikaelLarsson

    (@mikaellarsson)

    Yes, but that′s where i′m stuck. What does that call look like? I′m not a JS wiz, I go by trial and error most of the time =)

    Plugin Contributor beaver6813

    (@beaver6813)

    Okay, so after settings.animateUpdate = true; You need something like:

    //Destroy any existing scrolling (may help reduce memory)
$(".posts").infinitescroll("destroy");
$(".posts").infinitescroll({
                    loading         : {
                        img         : "<path_to_loading_image>",
                        msgText     : "<loading_message_text>",
                        finishedMsg : "<no_more_posts_text>"
                        },
                    nextSelector    : "<next_selector>",
                    navSelector     : "<nav_selector>",
                    contentSelector : "<content_selector>",
                    itemSelector    : "<post_selector>"
                    });

    Let me know if you need further guidance on selectors ??

    Thread Starter MikaelLarsson

    (@mikaellarsson)

    I have tried this but it doesn’t work and I can′t figure out why it′s not. I have tried setting debug: true but it doesn’t print anything in the console so i′m thinking something must be fundamentally wrong with the code. I′d be very glad if you wanted to have another look at the site.
    Thanks

    Mikael:

    Were you able to get this working? I am having exactly the same issue and it doesn’t work. I cannot find a solution on any forums!

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: Infinite Scroll] How do I reactivate inf-scroll after an Ajax-call?’ is closed to new replies.