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

Question

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.

frostyterrier · Accepted Answer · 2013-02-04 18:53:03Z

2

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.

answered Feb 4, 2013 at 18:53

frostyterrier

1,9121 gold badge15 silver badges16 bronze badges

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

2 Comments

Prashanth Shyamprasad Over a year ago

sorry , i have id 'tab-content', i missed it in the above sample, i have updated the code

Prashanth Shyamprasad Over a year ago

found the problem & solution myself, anyways thanks for the try, upvoted ur answer, hope u do mine ;)

Community · Accepted Answer · 2017-05-23 12:08:20Z

1

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);).

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Feb 5, 2013 at 2:58

Prashanth Shyamprasad

8372 gold badges17 silver badges40 bronze badges

2 Comments

frostyterrier Over a year ago

Cool, I'm glad you fixed it. Upvoted for solution, seems like it could help someone who has the same error message.

Prashanth Shyamprasad Over a year ago

@frostyterrier : thanks for that, nice to meet you, hope i'll get ur help in future too

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related