Getting Bad Element errors on pages that don't have a grid element
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am using a combo of masonry, images loaded and infinite scroll on a couple pages. On pages that don't have the .grid element I am getting:
Bad element for masonry: null
Bad element for imagesLoaded null
Bad element for InfiniteScroll: null

I need to know what I need to edit below to get rid of those errors. I think my issue is in the

var grid = document.querySelector('.grid');

part...Here is my working script:

// ***MASONRY*** for Lazy Grids - 24kb - https://masonry.desandro.com/  
import Masonry from "masonry-layout";  
// ***IMAGES LOADED*** for Lazy Grids - 10kb - https://imagesloaded.desandro.com/  
import imagesLoaded from "imagesloaded";  
// ***INFINITE SCROLL*** for Lazy Grids - 26kb - https://infinite-scroll.com/  
import InfiniteScroll from "infinite-scroll";  


// make imagesLoaded available for InfiniteScroll!!!  
InfiniteScroll.imagesLoaded = imagesLoaded;

// Grid query selector  
var grid = document.querySelector('.grid');

  var msnry = new Masonry( grid, {
    percentPosition: true,
    itemSelector: 'none',
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer',
    // nicer reveal transition
     visibleStyle: { transform: 'translateY(0)', opacity: 1 },
     hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
  });  

  // make imagesLoaded assign msnry item selector  
  imagesLoaded( grid, function() {
    grid.classList.remove('are-images-unloaded');
    msnry.options.itemSelector = '.grid-item';
    var items = grid.querySelectorAll('.grid-item');
    msnry.appended( items );
  });  

  // init Infinte Scroll  
  var infScroll = new InfiniteScroll( grid, {
    path: '.pagination__next',
    append: '.grid-item',
    outlayer: msnry,
    prefill: true,
    status: '.page-load-status',
    hideNav: '.pagination',
    scrollThreshold: 800,
    history: false,
  });  
`
awarded to Sanjo
Tags
javascript

Crowdsource coding tasks.

3 Solutions


Wrap it all in window.onLoad function

Window.onLoad( function(){
// Grid query selector

var grid = document.querySelector('.grid');

var msnry = new Masonry( grid, {
percentPosition: true,
itemSelector: 'none',
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
// nicer reveal transition
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});

// make imagesLoaded assign msnry item selector

imagesLoaded( grid, function() {
grid.classList.remove('are-images-unloaded');
msnry.options.itemSelector = '.grid-item';
var items = grid.querySelectorAll('.grid-item');
msnry.appended( items );
});

// init Infinte Scroll

var infScroll = new InfiniteScroll( grid, {
path: '.pagination__next',
append: '.grid-item',
outlayer: msnry,
prefill: true,
status: '.page-load-status',
hideNav: '.pagination',
scrollThreshold: 800,
history: false,
});

})

Now I get: TypeError: Window.onLoad is not a function
twd 30 days ago
Window.onload sorry. No capital L
EmmyMay 30 days ago
try window.onLoad . (the "w" is lowercase)
Chlegou 30 days ago
Window.onload sorry. No capital L. The problem is that it is looking for the grid before it has even loaded. I'm sorry for the typo
EmmyMay 30 days ago
I'm thinking the if below is better but tyvm for your time.
twd 30 days ago
Winning solution

Adding a condition to run the grid code only, when the grid exists, should do:

// ***MASONRY*** for Lazy Grids - 24kb - https://masonry.desandro.com/  
import Masonry from "masonry-layout";
// ***IMAGES LOADED*** for Lazy Grids - 10kb - https://imagesloaded.desandro.com/  
import imagesLoaded from "imagesloaded";
// ***INFINITE SCROLL*** for Lazy Grids - 26kb - https://infinite-scroll.com/  
import InfiniteScroll from "infinite-scroll";


// make imagesLoaded available for InfiniteScroll!!!  
InfiniteScroll.imagesLoaded = imagesLoaded;

// Grid query selector  
var grid = document.querySelector('.grid');

if (grid) {
    var msnry = new Masonry( grid, {
        percentPosition: true,
        itemSelector: 'none',
        columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer',
        // nicer reveal transition
        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
    });

    // make imagesLoaded assign msnry item selector  
    imagesLoaded( grid, function() {
        grid.classList.remove('are-images-unloaded');
        msnry.options.itemSelector = '.grid-item';
        var items = grid.querySelectorAll('.grid-item');
        msnry.appended( items );
    });

    // init Infinte Scroll  
    var infScroll = new InfiniteScroll( grid, {
        path: '.pagination__next',
        append: '.grid-item',
        outlayer: msnry,
        prefill: true,
        status: '.page-load-status',
        hideNav: '.pagination',
        scrollThreshold: 800,
        history: false,
    });
}
If I have other scripts below that one will I need a comma after the last } or anything? This is probably a dumb question. BTW you're my new best friend hahaha.
twd 30 days ago
No, it is not necessary to have a comma or any other character after the last }. You're welcome.
Sanjo 30 days ago

Hello,

You'd check the result of document.querySelector function:

// Grid query selector  
var grid = document.querySelector('.grid');
if (grid !== null) {
    ... the rest of the script
}
TY I gotta give it to sanjo because they first, this is great though ty.
twd 30 days ago
View Timeline