CODEWITHSUNDEEP
javascriptjquerywordpressjquery-isotope
Adam Bell
Adam Bell

Reputation: 1045

Isotope: jQuery not a function error using either jQuery or $ in WordPress

Having a weird problem trying to call Isotope on this page (https://starmountaincapital.com/media-center-test/) where no matter whether I use '$' (which of course, I shouldn't, but tried anyway) or 'jQuery', I get the same Not a Function error in Console. The code is coming straight from Isotope with some additions to work with filtering:

var $grid = jQuery('.grid').isotope({
    // options
        itemSelector: '.grid-item',
        layoutMode: 'fitRows'
    });

// filter items on button click
    jQuery('.filter-button-group').on( 'click', 'button', function() {
        var filterValue = jQuery(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });

So is this written correctly?

Upvotes: 0

Views: 2995

Answers (3)

Adam Bell
Adam Bell

Reputation: 1045

Even after adding the isotope.js file correctly, the issue still pertained.

The problem was actually in the JS itself. After some more tweaking, I moved the code out of the footer and into isotope.js as follows:

jQuery(function ($) {
 var container = $('#post-grid'); //The ID for the list with all the blog posts
 container.isotope({ //Isotope options, 'item' matches the class in the PHP
 percentPosition: true,
 itemSelector : '.grid-item', 
   layoutMode : 'masonry',
   masonry: {
   columnWidth: '.grid-item'
  }
 });

Upvotes: 1

Tristup
Tristup

Reputation: 3673

What I found by visiting your site url is the isotop.js file is missing, can you please put the specific file in js folder of your theme and also write the handle for isotop in dependency of the javascript file where you have written the above code. E.G : 

  wp_enqueue_script( 'isotop-js', 'path of isotop.js', array( 'jquery' ), '1.0', true );

  wp_enqueue_script( 'your-js', 'path of your js', array( 'isotop-js' ), '1.0', true );

hope this wil work for you.

Upvotes: 1

traktor
traktor

Reputation: 19376

The error message is not complaining about jQuery not being a function, but that the .isotope property of the jQuery object returned is not a function.

Looking at the network tab during page load shows a 404 error returned for the GET request to retrieve isotope.js from https://starmountaincapital.com/wp-content/themes/starmountain/js/isotope.js?ver=1

The server actually returns an HTML "NOT FOUND" error page. Check that isotope.js is correctly installed and, if so, in which folder it resides.

Upvotes: 1

Related Questions