jQuery("#mycarousel").jcarousel is not a function

Question

I must be doing something really stupid here, but I've been beating my head against it for a while and I haven't been able to find what's wrong.

On this page: http://ww2.accudata.com/

I'm trying to implement jCarousel, and I keep getting this error:

jQuery("#mycarousel").jcarousel is not a function

Here's what I have in my header:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/js/skins/carousel/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({

});
});
</script>

So as far as I can tell, I'm loading all of the scripts in the correct order, and I have verified that they are all there. So why does it say it's not a function?

Dennis · Accepted Answer · 2012-01-28T21:21:57.123

On line 39, you are reloading jQuery, which overwrites the jQuery object, removing the .jcarousel function. Make sure you are loading jQuery only once.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
<script type="text/javascript" src="http://ww2.accudata.com/wp-content/themes/accudata/js/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ww2.accudata.com/wp-content/themes/accudata/js/skins/carousel/skin.css" />

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({ //Would work if you called it here, but it gets deferred until the DOM is loaded

    });
});
</script>

...

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4'></script>
<!-- This gets loaded after you load the plugin, overwriting the jQuery object -->

Ah, that makes sense. The problem is that the second jQuery is being loaded by a WordPress plugin, and I don't have control over where in the header the jQuery gets loaded. I think there are some workarounds - I'll play with this and see what I can do. — Morgan Kay, Jan 28 '12 at 22:02
Yep, this was the problem - I moved my functions down lower in the header, and now everything's okay. I knew it had to be something simple. If anyone else has a problem like this in WordPress, move your scripts underneath the wp_head so they get loaded last. — Morgan Kay, Jan 28 '12 at 22:05

gdoron · Answer 2 · 2012-01-28T21:06:39.593

You get an error that jcarousel function is unknown which means that the js file with the jcarousel function was not loaded correctly. (The reference to JQuery itself works because the jQuery(document).ready... didn't give you an error)

Look at the rendered HTML and see if the path to the file match to his actual location. (They are not...)

By the way, why aren't you using JQuery alias $?
jQuery('#mycarousel') => $('#mycarousel')

JQuery slogan is "Write less do more"

score 2 · Answer 3 · answered Jan 28 '12 at 21:04

The error you're seeing basically means:

"we tried looking for the jcarousel function, and couldn't find it."

Open the page source and see what HTML is being rendered. Are you paths to the .js files correct and what you expect? Most of the times this is the cause of these types of problems.

So once you're sure that your references to the .js files are correct, try something like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#mycarousel').jcarousel({
            //Settings here.
        }); 
    });
</script>

jQuery("#mycarousel").jcarousel is not a function

3 Answers3