0

On my localhost web server these scripts are loading properly and functioning flawlessly, but on my BlueHost account my console is giving me errors about Isotope having no object.

Code:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.isotope.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.infinitescroll.js"></script>

<script type="text/javascript">
$(window).load(function(){
    $.ajaxSetup({ cache: false });
        var $container = $('#articlePost');


            $container.isotope({
                masonry: { columnWidth: $container.width() / 3}
                });


            $(window).smartresize(function(){
                $container.isotope({
                // update columnWidth to a percentage of container width
                masonry: { columnWidth: $container.width() / 3}
            });

            $container.isotope('reLayout');

    });
});

</script>

And here is the Chrome console error:

Uncaught TypeError: Object [object Object] has no method 'isotope' www.theciv.com:92
(anonymous function) www.theciv.com:92
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle
canacast
  • 231
  • 8
  • 23

1 Answers1

1

There are two versions of jQuery loaded in the page 1.9.1 and 1.8.3.

One is loaded in the header (1.9.1) 

<script type="application/javascript" src="http://www.theciv.com/wp-content/themes/toolbox/js/jquery-1.9.1.js" /></script>

Another one from wordpress 

<script type='text/javascript' src='http://www.theciv.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

I think it is the reason, remove one of them and it should work fine

Or make it compatible with jQuery.noConflict()

jQuery(function($){
    $.ajaxSetup({ cache: false });
    var $container = $('#articlePost');

    $container.isotope({
        masonry: { columnWidth: $container.width() / 3}
    });

    $(window).smartresize(function(){
        $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 3}
        });

        $container.isotope('reLayout');

    });
});
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • Ahh! I can't believe I missed that. Well, I removed the extra one so now it's only the Wordpress version of jQuery loading. Unfortunately now I'm getting the classic error that $ is undefined. Would this be because the Wordpress version is too old (1.8....) ? I've heard of some using 'jquery' instead of $, but am unsure if this is a webhost case-by-case issue. – canacast May 20 '13 at 06:47
  • I think wordpress uses [$.noConflit](http://api.jquery.com/jQuery.noConflict/), use jQuery instead of `$` or search for how to prevent it, also see http://core.trac.wordpress.org/ticket/16494 – Arun P Johny May 20 '13 at 06:48
  • Definitely works! Now to figure out how to convert all of my old $.on('click'... scripts to noConflict... – canacast May 20 '13 at 07:38