Isotope JS Error

Question

Need a bit of help with a Js error I am getting please:

Uncaught TypeError: $portfolio.isotope is not a function

  
//ISOTOPE FUNCTION - FILTER PORTFOLIO FUNCTION

    $portfolio = $('.portfolio-items');
    $portfolio.isotope({
        itemSelector : 'li',
        layoutMode : 'fitRows'
    });
    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });

Yes, Isotope has loaded. But on the page itself it shows no errors, only on pages without the isotope gallery. — user2202463, Jun 25 '15 at 12:03
So you are running this on pages that don't contain any `.portfolio-items` elements? — Turnip, Jun 25 '15 at 12:05
yes... as the Js is in a global script which is linked on all pages — user2202463, Jun 25 '15 at 12:06
Wrap your code form line 2 down in a length check: `if ($portfolio.length) { ...rest of your code... }` this will prevent it from running on pages that don;t contain the required elements — Turnip, Jun 25 '15 at 12:09

score 4 · Accepted Answer · answered Jun 25 '15 at 12:46

4

If you don't want your script to run on pages that don't contain the required elements (.portfolio-items), you can run your script conditionally based on the length property of your element collection stored in $portfolio:

$portfolio = $('.portfolio-items');

if ($portfolio.length) { // if 'length' is non zero. Enter block...

    $portfolio.isotope({
        itemSelector : 'li',
        layoutMode : 'fitRows'
    });
    $portfolio_selectors = $('.portfolio-filter >li>a');
    $portfolio_selectors.on('click', function(){
        $portfolio_selectors.removeClass('active');
        $(this).addClass('active');
        var selector = $(this).attr('data-filter');
        $portfolio.isotope({ filter: selector });
        return false;
    });

}

answered Jun 25 '15 at 12:46

Turnip

35,836
15
89
111

I am facing the same issue, tried your solution but still having the same error. What could be other possible reasons for this error? – Sachin Vairagi Sep 12 '18 at 09:50
@SachinVairagi You would also get the `Uncaught TypeError: $portfolio.isotope is not a function` error if you haven't loaded the isotope library correctly. Check the Network section of your browser's developer tools. – Turnip Sep 12 '18 at 16:14
Thank you for your response, I have raised new question and posted my codes as well, can you please check - https://stackoverflow.com/questions/52292697/typeerror-container-isotope-is-not-a-function – Sachin Vairagi Sep 14 '18 at 07:10

Isotope JS Error

1 Answers1