I am using bootstrap.js for tabs. but I could not execute the ajax request to download links when I click on the tab

Question

My html

<ul class="nav nav-tabs tabs-up" id="friends"> <li><a href="http://localhost:3000/contacts" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li> <li><a href="http://localhost:3000/follows/friends_list" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li> <li><a href="http://localhost:3000/follows/awaiting_request" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li> </ul> 

  <div class="tab-pane active" id="contacts"> </div> <div class="tab-pane" id="friends_list"> </div> <div class="tab-pane urlbox span8" id="awaiting_request"> </div> 

My javascript code is:

  $('[data-toggle="tabajax"]').click(function (e) { e.preventDefault() var loadurl = $(this).attr('href') var targ = $(this).attr('data-target') $.get(loadurl, function(data) { $(targ).html(data) }); $(this).tab('show') return false; }); 

I gave the links for the tabs accordingly. But I could not display these links on the page when I clicked on the tab. Can anyone help me on this.

Answer 1

Everything seems to work fine:

Jsfiddle

The only code I added to yours (other than using some gists for ajax calls) was that the tab bars were located inside <div class="tab-content"> .