CODEWITHSUNDEEP
javascriptjquerymixitup
Darren Bachan
Darren Bachan

Reputation: 743

Error with mixitup filtering on pages that don't have filtering

On my homepage I have mixitup working using this:

var containerEl = document.querySelector('.gallery-container');
    var mixer = mixitup(containerEl, {
        selectors: {
            control: '[data-mixitup-control]'
        },
        load: {
            filter: '.engagement-ceremony'
        }
    });

I got this from their website. It works fine, but the moment I go to another page I'm getting this error in console: Uncaught Error: [MixItUp] An invalid selector or element reference was passed to the mixitup factory function and it's causing my other js on the page to break.

I thought I'd try this instead to see what happens:

var mixer = mixitup('.gallery-container', {
        selectors: {
            control: '[data-mixitup-control]'
        },
        load: {
            filter: '.engagement-ceremony'
        }
    });

But then I got this error: Uncaught Error: [MixItUp] The provided selector yielded no container element.

I'm stumped as to why this would error this way.

EDIT So the only way I could get this to work properly without errors is to take this part of the mixitup script and load it onto my homepage conditionally using php. A hacky fix that bothers me, but the only way it'll work.

Upvotes: 3

Views: 3011

Answers (1)

Darren Bachan
Darren Bachan

Reputation: 743

// Gallery Filtering
    var containerEl = document.querySelector('.gallery-container');
    var mixer;

    if (containerEl) {
        mixer = mixitup(containerEl, {
             selectors: {
                 control: '[data-mixitup-control]'
             },
             load: {
                 filter: '.engagement-ceremony'
             }
        });
    }

I had to wrap the script in a if statement.

Upvotes: 3

Related Questions