Please read before judging
Yes, I am fully aware of the inferior title for my question. However, I am not able to change it to something that has a more explaining title. So if you have a working title, please let me know.
Okay, then we go for the question. I am using isotope for this particualary part, and get this annoying error with Chrome Developer. I can’t see any errors that can be related to this problem, but since this is an error I need to fix it (obsession).
Uncaught TypeError: b.isotope is not a function
I am using the following code for my website:
Isotope.js
jQuery(function ($) {
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
PHP
<?php if ( $the_query->have_posts() ) : ?>
<div id="isotope-list">
<?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category"); //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item col-md-4">
<ul class="grid cs-style-3">
<li>
<figure>
<?php // 'item' is used as an identifier (see Setp 5, line 6) ?>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('frontpage_thumb');
} ?>
<figcaption class="lefttext">
<h3><?php the_title(); ?></h3>
<span class="offgrey"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span>
<a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
</figcaption>
</figure>
</li>
</ul>
</div> <!-- end item -->
<?php endwhile; ?>
</div> <!-- end isotope-list -->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/toucheffects.js"></script>
<?php endif; ?>
The website can be found here.
I have tried looking it up, but as I can see there are no reason it’s becoming b.isotope as #isotope-list. I have searched online several times for working solutions, but I can’t find any. One post said it had something to do with Bootstrap. After updating to the Bootstrap I still see the issue, so I believe there are no errors with Bootstrap. However, there could be a connection issue between Boostrap and Isotope about the following:
$container
Maybe this is crashing with something from Bootstrap as container is used several times on my website.
To sum it up:
- Error is shown in Chrome Developer
- No visually errors
- Using WordPress, Isotope and Bootstrap
- Page can be found here
Do you know any working solutions or ideas? Please let me know.
I really recommend checking out the link to look for the solution as it could be infected with the other js I haven’t posted here.
The problem turned out to be that
isotype.js
was included twice.To avoid this situation one should always include scripts the way wordpress provides / intends scripts to be included. This ensures that scripts are never included more than once, and at the same time offers a convenient way to add dependencies between scripts, ensuring that these are included in the correct order.
Never write a
<script src="[whatever]"></script>
tag yourself (it is never the only way).Always include scripts using the wordpress function
wp_enqueue_script()
(codex) or if they have no value on their own (like jQuery), just register them usingwp_register_script()
(codex), so they are available for other scripts to depend on.Preferably include scripts only in the
wp_enqueue_scripts
hook (codex).Example of correct inclusion of scripts that have dependencies:
Always doing things the right way will increase compatibility with third party plugins and future versions of wordpress significantly, while reducing the risk of “strange” / “random” bugs (ie. human error)
As far as I can tell,
b.isotope
actually is the correct name of the function because it has been minified (see isotope.js). Make sure to include the isotope-plugin before you try to bind it to your HTML-elementsEDIT:
Have you tried to wrap your code in
isotope.js
in?