$(...).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();
});

Mihai Matei · Answer 1 · 2015-04-29T06:33:44.967

15

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

edited Apr 29 '15 at 06:33

answered Jan 12 '13 at 14:17

Mihai Matei

24,166
5
32
50

Thank you very much, I'm amazed, I tormented my mind 5 days ..... I am a beginner but here I found solutions every time Thank you again! – Alex Bosnea Jan 12 '13 at 14:40
Alex if this was the answer then please mark it so. Thanks. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Jul 24 '15 at 13:14

score 7 · Answer 2 · answered Mar 14 '18 at 01:39

7

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

answered Mar 14 '18 at 01:39

parfaire

103
1
5

PassKit · Answer 3 · 2013-01-12T14:24:15.573

4

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" />

edited Jan 12 '13 at 14:24

answered Jan 12 '13 at 14:18

PassKit

12,231
5
57
75

Thanks, the path was the problem. – Alex Bosnea Jan 12 '13 at 14:45

score 1 · Answer 4 · answered Jan 12 '13 at 14:18

1

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.

answered Jan 12 '13 at 14:18

Sampson

265,109
74
539
565

– Alex Bosnea Jan 12 '13 at 14:42

score 1 · Answer 5 · edited Apr 25 '15 at 20:14

1

Try this:

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

Put @Scripts.Render("~/bundles/jqueryui") in the <body></body> of your layout.cshtml

edited Apr 25 '15 at 20:14

rink.attendant.6

44,500
61
101
156

answered Apr 25 '15 at 19:50

Hao Shi

11
1

score 0 · Answer 6 · answered Jun 08 '19 at 15:48

The error Uncaught TypeError: $(...).tabs is not a function may also be produced when in a Django project on the Admin area and using django-tabbed-admin under the following setup:

Django = 1.10.5
django-tabbed-admin=1.0.4
DEFAULT_JQUERY_UI_JS = 'tabbed_admin/js/jquery-ui-1.11.4.min.js'

The problem is that the code in jquery-ui-1.11.4.min.js for this Django lib is as follows:

    /*! jQuery UI - v1.11.4 - 2015-07-27
    (...)*/
    jQuery = jQuery || django.jQuery.noConflict(false);

and the code on django-tabbed-admin uses it this way (change_form.html):

    <script type="text/javascript">
        (function($) {
            $(window).scrollTop()
            $('#tabs').tabs({
                {% if add %}
                // when adding, don't select a tab by default, we'll do it ourselves
                // by finding the first available tab.
                selected: -1
                {% endif %}
            });
        (....)
        })(django.jQuery);
    </script>
    <!-- end admin_tabs stuff -->

To sort this out this should be what would be passed in to the IIFE instead of the (django.jQuery) as above:

<script type="text/javascript">
        (function($) {
            (....)
        })((typeof window.jQuery == 'undefined' && typeof window.django != 'undefined')
  ? django.jQuery
  : jQuery)
    </script>
    <!-- end admin_tabs stuff -->

I've reported this issue in the project and created a PR with a fix for it. Waiting on it to be approved, so in the meantime you can sort it following my simple fix.

I hope this helps someone out there.

score 0 · Answer 7 · answered Feb 28 '20 at 11:21

0

Check your page you might have loaded multiple versions of jQuery

answered Feb 28 '20 at 11:21

Tanmay Chakraborty

11
1

Why does this happen? Can you elaborate? – ashwani Jun 03 '20 at 06:03

score -1 · Answer 8 · answered Oct 25 '13 at 15:08

I had the same problem, I realized that I had jquery and bootstrap css imports that enter in conflict each other. Take a look to the ones you have imported and reduce those imports to the minimum to see which is the conflict.

Here there is an example of how to implement it, I took that example and worked, then I adapted to my application:

for jquery 1.9 (click on view source to see the code) http://jqueryui.com/tabs/

for jquery 1.8 (check the example at the end of the page) http://api.jqueryui.com/1.8/tabs/

Hope it helps!

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

8 Answers8