[SOLVED] $ Is not a function

[Sivo]

I am trying to add this code to my prestashop header and the firefox returns me the following error:

 

 

Code used:

<script type="text/javascript">
    $(document).ready(function() {
      $("#owl-demo").owlCarousel({
        navigation : true
      });
    });
</script>

Firefox (Firebug console) error:

TypeError: $(...).owlCarousel is not a function navigation : true

I also tried to include {literal} tags, and with the help of the owner of this script, he found a problem on two jquery libraries but also deleting the other library (or adding the function NoConflict), still not work.

 

Maybe am I missing something on the code?

 

Thnaks!

Edited February 11, 2014 by Sivo (see edit history)

[NemoPS]

DId you embed that plugin before adding the script?

[vekia]

im worried about that,

take a look, there is a 

$(document).ready(function()

function

it runs code only when whole website (with attached libraries) is loaded, so it mean, probably, that js file isn't included at all

[Sivo]

If for embed u mean the whole path to the JS it is. And it's fine since in the code the path is correct displaying the JS.

 

@vekia, the js file is included since I can read it by displaying the whole code.

 

 

DEMO (maybe it will help you to understand the problem): ilernaonline.com (you will see the carousel commented to hide it on HTML).

 

Code to find easily the carousel on the demo (search by):

   <div id="owl-demo" class="owl-carousel">

Edited February 10, 2014 by Sivo (see edit history)

[vekia]

can you try without navigation:true

 

just simple:

$(document).ready(function() {
      $("#owl-demo").owlCarousel();
    });

[Sivo]

I'll try soon, but does this function add the navigation on the carousel, right? So since I am deleting it, it will be the carousel w/o navigation.

[NemoPS]

No, what I meant was if you added owlCarousel as plugin to the head of the page

[Sivo]

Well, i just added this code on .TPL file

<script type="text/javascript" src="themes/theme/carousel/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="themes/theme/carousel/js/owl.carousel.js"></script>

 

Anything else needed?

[vekia]

btw. before your post has got an url to your website

i checked it and analysed sources,

there was your owl.carousel.js library, it was attached properly

[Sivo]

Hey Vekia,

 

I added the script again without the "navigation: true" and now feedbacks the following error:

ypeError: $ is not a function
	

$(document).ready(function() {

Where is suposed to be the main error? I am checking everything but i can't find the problem since on my static HTML page works, but not there.

Edited February 10, 2014 by Sivo (see edit history)

[vekia]

can you attach url once again please? 

[Sivo]

U mean the website?

 

www.ilernaonline.com

[PascalVG]

Hi sivo,

 

in your code you have: (line 21)

<script>

  jq1191 =jQuery.noConflict(true);

</script>

 

Not sure if you added this or the theme developer. If the developer did this, this is added to prevent compatibility problems with other javascript libraries that can be loaded. But, in "no-confict" mode, the $ shortcut is not available and the longer jQuery must be used, i.e.

jQuery(document).ready(function ($) {

 

By including the $ in parenthesis after the function call you can then use this shortcut within the code block again.

Hope this helps,

pascal.

[Sivo]

Hey Pascal, I added the (NoConflict) code by my own, to avoid compatibility problems since the developer of the carousel investigated the code also and said he was facing problems with compatibility with 1.7.2 JQuery library.

 

Thanks you for your time, I'll take a look into your possible solution as soon as posible.

Edited February 11, 2014 by Sivo (see edit history)

[Sivo]

Hello again Pascal,

 

Adding the following code it does not work

<script>
    jQuery(document).ready(function ($) {
      $("#owl-demo").owlCarousel({
        navigation : true
      });
    });
</script>

Also adding this one with {literal} tags

{literal}
<script>
    jQuery(document).ready(function ($) {
      $("#owl-demo").owlCarousel({
        navigation : true
      });
    });
</script>
{/literal}

[PascalVG]

Hi Sivo,

What did it say? Any error or so?

At the moment, I don't see the suggested change made in the website, so I assume you took it out again? Or didn't you clear the server cache and does it still show the old error?

 

Let me know,

pascal.

[Sivo]

Hello Pascal,

 

Well it seems like NoConflict was crashing my script, so I dont know why but at least it's solved. And it worked with {literal} tags but also it works without them. Could someone explain me what's going on? Because first of all I added the code by default (seems like still default) and did not work.

 

Anyway, thank you all for the help!

[PascalVG]

Hello Pascal,

 

... Because first of all I added the code by default (seems like still default) and did not work.

Hi Sivo

Glad you made it work.

Not sure what code exactly you refer to in the above line.please elaborate.

 

Pascal

[Sivo]

I mean that I just added the same code as the one on my HTML file ( the original one from the developer ) and it didn't work, but after your help given it works perfectly.

 

Thanks again,

 

Sivo