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

  1. MikaelLarsson
    Posted 4 years ago #

    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() {
    		$('.filter li.active').removeClass('active');
    		// Ajax call
    		$.get('/ajax-utbildningar/?category='+cat, function(data) {
    			// Append content
    			// Grid-a-licious
    			settings.animateUpdate = true;
    			settings.animateUpdate = true;
    		return false;

    Here´s a link to the test-site:


  2. beaver6813
    Plugin Author

    Posted 4 years ago #

    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:
    For example, which infinite-scroll seems to work on?

  3. MikaelLarsson
    Posted 4 years ago #

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

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

  4. beaver6813
    Plugin Author

    Posted 4 years ago #

    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.

  5. MikaelLarsson
    Posted 4 years ago #

    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 =)

  6. beaver6813
    Plugin Author

    Posted 4 years ago #

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

    //Destroy any existing scrolling (may help reduce memory)
                        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 :)

  7. MikaelLarsson
    Posted 4 years ago #

    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.

  8. ccvannorman
    Posted 4 years ago #


    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!


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Infinite-Scroll
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic