CODEWITHSUNDEEP
ajaxjquerytwitter-bootstraptabs
Prashanth Shyamprasad
Prashanth Shyamprasad

Reputation: 837

Twitter bootstrap tabs "tab" method not working after ajax loading of some page content

I am using twitter bootstrap in my work. The "tab" method (ie; $("a element under tab li").tab("show") ) swiches to the new tab specified by the jQuery selector perfectly, until an ajax loading is done. When I create a new tab using jQuery append, load its pane content by jQuery load and try to switch to that new tab using tab("show") it gives error element doesnt have a method tab

UPDATE

    <div class="tabbable">
      <ul class="nav nav-tabs" id="tab-set">
        <li class="active"><a data-toggle="tab" href="#tab1"> tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">tab 3</a></li>
        <li><a data-toggle="tab" class="ajax" href="test.html">tab 4 - ajax</a></li>
      </ul>
      <div class="tab-content" id="tab-content">
        <div id="tab1" class="tab-pane active"> tab 1 content </div>
        <div id="tab2" class="tab-pane"> tab 2 content </div>
        <div id="tab3" class="tab-pane"> tab 3 content </div>
      </div>
    </div>

This is the javascript code to add new tab via ajax

$("#tab-set").append("<li id='"+tabType+"'><a href='#" + tabType +
       "-pane' data-toggle=\"tab\"> " + tabName + "</a></li>");

$("#tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");
$("#" + tabType + "-pane").load(tabUrl);

After adding new tab i try to switched to that tab using

$("#" + tabType + " a").last().tab("show");

but that doesn't work.

Upvotes: 0

Views: 2125

Answers (2)

Prashanth Shyamprasad
Prashanth Shyamprasad

Reputation: 837

Yes, i got the trouble now.

I was loading a page using $("#" + tabType + "-pane").load(tabUrl); na, that page also had html, head, body elements and it was also loading jquery in it. That created the problem. Its something related to the problem given here

Now i changed the contents of the loading pages that it loads only the basic inside elements needed, without tags like html, head, script, body etc.

This was giving headache for me a whole day. Thank god that i finally fixed it.

EDIT

Not even need to remove all elements. Just need to take care of not loading jquery again from that loading page (loading via $("#" + tabType + "-pane").load(tabUrl);).

Upvotes: 1

frostyterrier
frostyterrier

Reputation: 1912

On this line:

$("#tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");

You have #tab-content, but your div actually has a class of tab-content, not an id. So it needs to be:

$(".tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");

I tested your code by creating variables for tabType, tabName, and tabUrl, and it works for me with that tiny change I mentioned above. But I wasn't able to get the same error as you (element doesnt have a method tab) so if this still doesn't work for you there's something else going on and you will need to post more of your code.

Upvotes: 2

Related Questions