JQuery code to initiate Infinite Scroll after AJAX complete?

  • Hi Tom,
    I thought to try a different approach to the blog section while using an AJAX page loader; thought to try to use a masonry layout. Am getting a bit confused as to how I can initiate the masonry script as I checked out David Desandro’s page and his script looks to relate to a different grid system to yours. I tried this so far:
    $('.masonry-container').masonry( 'layout' )
    but that only returns an error of:
    cannot call methods on masonry prior to initialization; attempted to call 'layout'
    I have searched extensively but cannot find any other suggestions.
    Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    I think that error means that masonry hasn’t been activated yet. How are you initializing it on your page?

    Thread Starter deeve

    (@deeve)

    Hi Tom,
    That’s what I’m unsure about. If I load the page directly (via url) it loads as it should. When I attempt to load from another page via an AJAX call it fails. Therefore I was wondering if there was a jQuery masonry init() code I should be using upon AJAX complete?
    Thanks in advance for your time.

    Theme Author Tom

    (@edge22)

    So if you refresh the page or type the URL into your address bar, it works fine?

    How are you loading pages via AJAX?

    Thread Starter deeve

    (@deeve)

    Yes. Currently I’m trying to use plugin called Zajax as it throws less errors than others I’ve tried but the other possibilities are AWS (Ajaxify) and Advanced AJAX Page Loader. They nearly all offer the ability to enter code to re-load js & css after AJAX complete but I imagine I need to re-initiate the js for the masonry grid to get it to display correctly? The CSS issues I have are on another thread on this forum.

    Theme Author Tom

    (@edge22)

    In that case Zajax would need to implement a trigger once it was done loading (they may already have one?) which you could then “hook” into and re-initiate masonry.

    Thread Starter deeve

    (@deeve)

    Zajax (or the others) doesn’t have these built in. Usually you have to search online to see if a plugin’s author has posted such a code snippet or try yourself to deduce how the function in question is initiated on a normal page load. I thought to ask you directly as thought you’d know how you initiated the masonry script from within generatepress when it loads normally via a url and also, I suspect other users of your theme framework will want to use it with AJAX.

    As a side note; I’ve also been trying different approaches (visiting the blog page from a different initial source page – varying the landed page has an effect on the scripts & styles behaviors on the subsequent AJAX loaded content. For example if I land on my homepage the blog page does not then work. If I land on the blog page and then click on an article, that loads correctly. Then click on blog from nav that also loads correctly via AJAX, as does the infinite scroll script.

    The only conclusion I can make from all of this is, is that certain scripts and styles are not being applied from the landed page to the AJAX content loaded into that initial (landing) page.

    Thread Starter deeve

    (@deeve)

    ..I’ve also noticed that when the masonry grid does not appear the grid class and value is: .masonry-container.are-images-unloaded {opacity:0;}

    Theme Author Tom

    (@edge22)

    I’d have to see your site to know why that’s not working.

    It sounds like you’re using GP Premium if you have GP masonry built in? If so, we’re not allowed to offer support for premium features here on www.remarpro.com. You’d need to contact us via our website, or use our premium forum: https://generatepress.com/support

    Let me know ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘JQuery code to initiate Infinite Scroll after AJAX complete?’ is closed to new replies.