$(...).tabs is not a function

Question

I have this code on two pages on my site, but at one page the function doesn't work. Firebug shows me " $(...).tabs is not a function ". I don't understand why, can anyone tell me what is wrong ?

this is working: http://www.invat-online.net/variante-rezolvate

this is not working: http://www.invat-online.net/variante-explicate-limba-romana/varianta-01

Here is the code:

<div id="tabss">
    <ul>
        <li><a href="#SubiectI">Subiect I</a></li>
        <li><a href="#SubiectII">Subiect II</a></li>
        <li><a href="#SubiectIII">Subiect III</a></li>
    </ul>
    <div id="SubiectI">content here</div>
    <div id="SubiectII">content here</div>
    <div id="SubiectIII">content here</div>
</div>

$(document).ready(function() {
   $("#tabss").tabs();
});

Answer 1

You have relative paths to javascript files:

javascript/jquery-ui-1.9.2.custom.min.js

change them to absolute paths because you're using mod_rewrite module

/javascript/jquery-ui-1.9.2.custom.min.js

In first link the server is looking to the directory

http://www.invat-online.net/javascript/my_js_file.js (which exists)

but in the second one the path will be

http://www.invat-online.net/variante-explicate-limba-romana/javascript/my_js_file.js which do not exists

Answer 2

In my case:

I was using

jquery-ui-1.10.3.minimal.min.js

instead of

jquery-ui-1.10.3.custom.min.js

minimal version does not include ui.tabs.js, hence no ui.tabs function. Hope this helps someone else out there

Answer 3

The issue is that the jQuery UI js and css is not loading.

Try changing the path in you <script> tags to either the directory above ../javascript or the website root /javascript.

<script src="/javascript/head.min.js"></script>
<script src="/javascript/jquery-ui-1.9.2.custom.min.js"></script>
<link href="/stylesheets/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />

Answer 4

Your first demo loads:

http://www.invat-online.net/javascript/jquery-ui-1.9.2.custom.min.js

Your second demo attempts to load:

http://www.invat-online.net/variante-explicate-limba-romana/javascript/jquery-ui-1.9.2.custom.min.js

The last one results in a 404. You should correct the path of the later, perhaps instructing it to find jQuery UI in one directory above the current: ../jquery-ui-1.9.2.custom.min.js.