CODEWITHSUNDEEP
jquerywordpressjquery-pluginsjquery-isotope
Digital Brent
Digital Brent

Reputation: 1281

JQuery Isotope Plugin Mysterious Error

I'm currently using a tutorial to learn how to implement a JQuery plugin called "Isotope" in a wordpress theme that I'm building. Here is a link to the tutorial that I'm using: http://www.designlunatic.com/2011/08/isotope-tutorial/#wpcf7-f780-w1-o1

I have referenced the JQuery library in the functions.php file, and I have enqueued it and the isotope.js file (I've also registered this file) using the wp_enqueue_script (and wp_register_script) function. I know these files are being linked to because when I view the source code and click on the links I don't get an error. The files come up and they appear to be linked correctly via the wp_head function.

The problem I'm having is that the script to use isotope is giving me some kind of error in the console.

I've tried a few different methods but the error is usually:

"Uncaught TypeError: Property '$' of object [object Object] is not a function"

The error is referring to the following script contained in the head of the document:

<script type="text/javascript">
        $(document).ready(function() {
            alert('called');
            var $container = $('#content');
            $container.isotope({
                filter: '*',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });

            $('#nav a').click(function() {
                var selector = $(this).attr('data-filter');
                $container.isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false
                    }
                });
                return false;
            });

        });
    </script>

I have tried loading this as a separate script and registering/enqueue-ing it with a dependancy on JQuery which gave me basically the same error. I have also tried replacing '$' with 'JQuery' and placing the '$' inside the parameters for the functions. When I switch that I get this error:

"Uncaught TypeError: Property 'JQuery' of object [object Object] is not a function"

What am I doing wrong here? I've followed the tutorial instructions as close as I can. Please help! Thanks!

Upvotes: 1

Views: 6327

Answers (1)

varun1505
varun1505

Reputation: 810

the J in jQuery is not uppercase. its lower case. so, if you change it to jQuery(document).ready(function($){}); , it should work.

The error occurs if you have jQuery noConflict mode enabled somewhere in your code.

The jQuery library included with WordPress is set to the noConflict() mode. See the codex for wp_enqueue_script for more details.

Cheers! :)

Upvotes: 3

Related Questions