WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Infinite scroll with Advanced Ajax Page Load Plugin? (13 posts)

  1. idaderko
    Member
    Posted 1 year ago #

    Hello,

    I'm using Both Infinite Scroll Provided By Jetpack and Advanced Ajax Page Loader Plugin and There are few issues I encountered. First of all, please visit http://experimental.musicglaze.com to see demo.

    Now, once you first load the website, everything works fine, scroll down and additional 2 posts will be loaded. Now click on logo "Music Glaze Experiments" and same page will load, but this time via ajax. Scroll down again and you will see that no posts are loaded.
    I don't know why, but assume a solution would be the following:

    In Advanced Ajax Page Loader Plugin Settings there is section called "Reload Code" You can paste code there, such code will execute once ajax finishes loading, so I thought that I need to paste some sort of code there that will re apply / re start infinite scroll? Not sure what exactly needs to be posted there.

    Now for the next issue. Click on Thumbnail of any post (smaller image inside big image) This will bring you to this post page. Note how url changes to post page url. Now scroll down a little and you will see how url changes back to standard. This ruins back and forward arrow functionality, and users can't copy it etc. I'm sure that this is caused by infinite scroll as disabling it fixes this one issue. It seems that it still gets applied even when there are no posts to scroll.

    This 2 issues have been bugging me for whole day, I tried various container div combinations etc, but it doesn't work, so I'm asking forums for help now.

    http://wordpress.org/extend/plugins/jetpack/

  2. idaderko
    Member
    Posted 1 year ago #

    UPDATE

    Posts loaded with infinite scroll don't load as ajax when clicked on thumbnail

  3. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    I'm not sure I understand why you want to use both plugins at the same time. Could you give me more details about what you'd like to achieve?

    Could you also try to add Infinite Scroll support without Advanced Ajax Page Loader, and let me know if it works? You can follow the instructions here to get it set up:
    http://jetpack.me/support/infinite-scroll/
    http://ottopress.com/2012/jetpack-and-the-infinite-scroll/

  4. idaderko
    Member
    Posted 1 year ago #

    @Jeremy Herve

    Hi, Thanks for quick reply. Yes, Without Advanced Ajax Page Loader plugin works perfectly, I even figured out the masonry bit, so it gets applied with each load.

    The reason I would like to use both plugins is following, infinite scroll for obvious functionality of loading posts once user reaches bottom of the site.

    And Advanced Ajax Loader So when user clicks on post link to view it in separate page (comments etc) or preforms a search, these things should not reload page as there is one main audio player in the header which should not stop playing when user interacts with website.

    Infinite scroll works perfectly before any ajax requests are made, however once I load something everything stops working. Any suggestions? Also I don't understand why it changes url once I scroll down in a single post page loaded in with advanced ajax loader.

    Maybe there are other ajax page loading plugins that do work with jetpack?

  5. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Thanks for providing more details about your problem, I understand what you're trying to do now.

    What happens when you turn off the Infinite Scroll module? Does Advanced Ajax Page Loader work properly?
    And when you enable both modules, do you see any Javascript errors in your Javascript console when scrolling or clicking on an entry?

    I also noticed that you use a custom version of jQuery on your site. What happens when you use the version of jQuery that comes bundled with WordPress instead? Both Advanced Ajax Page Loader and Jetpack were tested to work with this version of WordPress, but we didn't test it when using a custom version of jQuery.
    You will want to use wp_enqueue_script to enqueue the proper version of jQuery on your site.

  6. tophboogie
    Member
    Posted 11 months ago #

    Hello!

    Was this issue ever resolved? I am seeing a similar problem with a blog I am building using the Roots theme.

    I configured Ajaxify WordPress Site plugin to ajax load all page requests. When Infinite scroll is disabled everything works happily, however when both AWS and jetpack's infinite scroll are enabled I see odd behavior.

    First, if the blog page is accessed directly (here) the infinite scroll works as expected. When the blog page is loaded via ajax request from another page, there is no infinite scroll. I assume this has something to do with the jquery not recognizing new DOM elements, but I am unable to find a solution.

    Also, as described above, some of my post single pages have the url change while scrolling the single page. This only happens with the AWS plugin is enabled. Also, this only seems to happen on posts that were loaded via the infinite scroller. (IE: only posts NOT included on the first page of the blog)

    My code to enable infinite scroll is below - thanks in advance for any help pointing me in the right direction :)

    add_action( 'init', 'infinite_scroll_init' );
    function infinite_scroll_init() {
    	add_theme_support( 'infinite-scroll', array(
    		'container' => 'infinite-scroll-loop',
    		'footer'    => false,
    		'render'	=> 'tb_render_function',
    		'wrapper'	=> false
    	) );
    }
    function tb_render_function() {
    
    	?><style>nav.post-nav {display:none;}</style><?php		
    
    	while (have_posts()) : the_post();
    		get_template_part('templates/content', get_post_format());
    	endwhile;
    }

    EDIT: updated incorrect blog link :/

  7. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    Since Infinite Scroll is not longer active on your site, I don't see any issues at the moment. Once you reactivate Jetpack IS, could you try to comment out the function creating relative URLs, in lib/config.php in your theme folder?

    add_theme_support('root-relative-urls');

    Infinite Scroll might not load properly if the libraries are not available on the page.

    Let me know if it helps.

  8. idaderko
    Member
    Posted 11 months ago #

    Ok

  9. tophboogie
    Member
    Posted 11 months ago #

    Hi Jeremy!
    Thanks again for your help looking into this. Apologies for disabling the broken functionality, I'll leave IS running this time so you can have a better look.

    I've commented out the line involving relative urls - however this actually made things slightly worse. With that commented out, paginated blog pages also are having problems with the url changing (say, from '/blog/page/2' to simply '/blog'). With the line uncommented this effect is only seen on single post pages, not paginated blog pages too.

    Thanks!

  10. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    Apologies for disabling the broken functionality

    No need to apologize! I totally understand.

    I'll leave IS running this time so you can have a better look.

    I can see the problem now. I'll ask one of our Infinite Scroll experts to have a look, and get back to you as soon as possible.

    Thanks!

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    I'll ask one of our Infinite Scroll experts to have a look, and get back to you as soon as possible.

    I'm afraid I have some bad news: you won't be able to use both plugins at the same time for now. We're working on some improvements to the Infinite Scroll module at the moment, and once we releases these changes you will be able to tell Infinite Scroll what query arguments to use and where to load new content.

    Until then, I would recommend that you customize the Ajax plugin to load content much like the Infinite Scroll does.

  12. tophboogie
    Member
    Posted 11 months ago #

    Hi Jeremy,
    I'm confused by your answer - the Infinite Scroll module is already loading content in the correct place, and I don't particularly need to include query arguments (I don't think). The problem is that the urls start changing around incorrectly on certain pages.

  13. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 11 months ago #

    To be able to use both plugins on your site, you would need to customize Infinite Scroll to tell it what query arguments to use and where to load new content. Without this custom implementation, the 2 plugins cannot really work together. But unfortunately, IS doesn't support custom queries within templates yet.

    That's why I'm afraid I can only suggest that you choose to use only one of the modules for now.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic