Bootstrap 3.x Tab not working - Uncaught TypeError: Object [object Object] has no method 'tab'

Question

I'm trying to get tabs working on my app, and following the Bootstrap docs to set them up results in an error: Uncaught TypeError: Object [object Object] has no method 'tab' . I have a JSFiddle of the problem code: Not Working Fiddle

A little more info, which could be relevant: my app, built using Symfony, is compiling Bootstrap with Less, hence needing to use my own Bootstrap resources for the Fiddle example. There could be a problem with the compiling that's causing this, but I do see the Tab javascript code in there...

The HTML:

<div class="container">
  <div class="row">
    <ul id="campaignTabs" class="nav nav-tabs">
      <li class="active"><a href="#tasks" data-toggle="tab">Tasks</a></li>
      <li><a href="#schedule" data-toggle="tab">Schedule</a></li>
      <li><a href="#upgrade" data-toggle="tab">Upgrade</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="tasks">
        Tab 1
      </div>
      <div class="tab-pane fade" id="schedule">
        Tab 2
      </div>
      <div class="tab-pane fade" id="upgrade">
        Tab 3
      </div>
    </div>
  </div>
</div>

The JS:

$('#campaignTabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

Any help would be appreciated!

EDIT: My original link was accidentally using links to local resources, so naturally that wasn't working! I updated to using resources from Dropbox, so hopefully those are working now.

Habibillah · Accepted Answer · 2013-12-06 01:27:51Z

4

You are miss the CSS and JS files. I update your jsfidle at http://jsfiddle.net/LS37A/3/ to fix your problem by point to official bootstrap CSS and JS at http://getbootstrap.com/getting-started/#download-cdn

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

edited Dec 6, 2013 at 1:27

answered Dec 6, 2013 at 1:19

Habibillah

28.8k5 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TheGremlyn Over a year ago

Oops! My app (using Symfony) is compiling bootstrap with less, so I was attempting to reference copies of the compiled TWBS code. The issue is still happening with my local code using the compiled files, and oddly JSFiddle didn't give me the same loading error. I'll put up a new Fiddle with properly sourced copies of my compiled TWBS code.

ragefuljoe · Accepted Answer · 2013-12-06 18:22:13Z

1

as answered in the chat, your compiled bootstrap.js is faulty. Either use the prebuilt js in dist folder, or make sure your compiler is including all required .js libs.

answered Dec 6, 2013 at 18:22

ragefuljoe

2462 silver badges5 bronze badges

1 Comment

TheGremlyn Over a year ago

Definitely a problem with the compiled bootstrap.js. Not sure why, but I guess I don't really need to care since I can use the pre-compiled dist version included with the package.

Tushar Gupta - curioustushar · Accepted Answer · 2013-12-06 01:15:15Z

1

Working fiddle Demo with added live links of bootstrap library.

Problem with your fiddle

links are dead see-

http://kiomedia.virt/app_dev.php/js/93eb36e_bootstrap_1.js

http://kiomedia.virt/app_dev.php/css/fabf8b3_bootstrap_1.css

enter image description here

answered Dec 6, 2013 at 1:15

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

1 Comment

TheGremlyn Over a year ago

See edit in the question regarding my Bootstrap resources, thanks!

Collectives™ on Stack Overflow

Bootstrap 3.x Tab not working - Uncaught TypeError: Object [object Object] has no method 'tab'

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related