CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Rahul Darji
Rahul Darji

Reputation: 43

Uncaught TypeError: $(...).typeahead is not a function

I am working on bootstrap responsive "Content Tabs" and as a starter guide I got the following code.

JS

$('#openBtn').click(function() {
     $('#myModal').modal({
         show: true
     })
 });
 $('#myTab a').click(function(e) {
     e.preventDefault();
     $(this).tab('show');
 });

 $(function() {
     $('#myTab a:last').tab('show');
 })
 $("[data-toggle=tooltip]").tooltip();
 $("[data-toggle=popover]").popover();
 $(".alert").delay(200).addClass("in").fadeOut(3500);

 $(".alert").addClass("in").fadeOut(3500);

 $('.typeahead').typeahead({
     source: function(typeahead, query) {
         /* put your ajax call here..
         return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
         });
         */
         return ['alpha', 'beta', 'bravo', 'delta', 'epsilon', 'gamma', 'zulu'];
     }
 });
 $("[rel='tooltip']").tooltip();

 $('.thumbnail').hover(
     function() {
         $(this).find('.caption').slideDown(250); //.fadeIn(250)
     },
     function() {
         $(this).find('.caption').slideUp(250); //.fadeOut(205)
     }
 );

HTML

<div class="container">
    <div class="row">

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>I'm in Section 2.</p>
    </div>
  </div>
</div>
</div>

When i'm running this code its giving me following error:

"Uncaught TypeError: $(...).typeahead is not a function"

ALthough my tabs work but its affecting another part of code which has stopped working. If I remove this part of Typehead function code from my JS file then my other part of code is working perfectly fine,but then the tabs doesn't work.

Any guidance in this will be highly appreciated.

Thanks in advance

Upvotes: 2

Views: 1698

Answers (1)

Nikita Jajodia
Nikita Jajodia

Reputation: 4610

Just remove following code from JS file.

 $(function() {
           $('#myTab a:last').tab('show');
       })
       $('.typeahead').typeahead({
         source: function (typeahead, query) {
           put your ajax call here..
          return $.get('/typeahead', { query: query }, function (data) {
         return typeahead.process(data);
      });

     return ['alpha','beta','bravo','delta','epsilon','gamma','zulu'];
     }
   });

Add following code instead of that

 $(".nav-tabs a").click(function(){
       $(this).tab('show');
   });

Upvotes: 1

Related Questions