JQuery tabs won't load

Question

I can't seem to load the tabs on my page. I get an error:

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

Here is my code:

<link href="../css/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8">
<link href="../css/custom.css" rel="stylesheet">

<link href="https://code.jquery.com/ui/1.12.4/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" type="text/css"> 

<link rel="stylesheet" href="/resources/demos/style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">

<script src="https://code.jquery.com/ui/1.12.4/jquery-ui.js"></script> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
     $("#tabs").tabs();
 });

</script>

` What I am missing?

Can you clarify? Which line loads the library? I tried jquery-1.12.4.js first and no dice. — Neil Bergenroth, Oct 03 '18 at 03:44
load `` on top .Your tab plugin load before js library so you got that error. — 4b0, Oct 03 '18 at 03:46
Thank you, but still getting that error. I am including a headers file (which contains all of the headers) on the page that is loading. Does that change anything? — Neil Bergenroth, Oct 03 '18 at 03:54
I am doing a php include directive which loads the headers for the page so I don't have to include the on each page, I just include that file. — Neil Bergenroth, Oct 03 '18 at 03:59
Please see this old question https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup — 4b0, Oct 03 '18 at 04:01
Use latest and most reliable version of jquery to make it work proper. jquery-1.12.4 is too old version. — ElusiveCoder, Oct 03 '18 at 05:08

score 0 · Accepted Answer · answered Oct 03 '18 at 05:26

0

You need to use a later version of jQuery.

You could change <script src="https://code.jquery.com/jquery-1.12.4.js"></script> to:

2x: <script src="https://code.jquery.com/jquery-2.2.4.js"></script>

3x: <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

answered Oct 03 '18 at 05:26

Maytha8

846
1
8
26

1

Thank you, but still not working, same error. I must be missing something. – Neil Bergenroth Oct 04 '18 at 00:01
1

Figured it out. Was loading an older version of jquery at the end of the page in an included footer file. Thanks all, I appreciate it. – Neil Bergenroth Oct 04 '18 at 04:54
**Note:** jQuery UI will not support browsers depending on jQuery 1x (IE) because jQuery UI depends on jQuery 2x and higher. – Maytha8 Oct 08 '18 at 13:45

JQuery tabs won't load

1 Answers1