CODEWITHSUNDEEP
jqueryruby-on-railstwitter-bootstrap
Pierre
Pierre

Reputation: 8348

Twitter Bootstrap tabs not working within a modal

In a rails application, I'm loading the contents of a modal window (bootstrap modal) through Ajax. This works fine.

This content contains tabs (bootstrap tabs). The tabs are displayed properly, I can click on the tabs and the active tab will change properly... but the content will not change.

<div id="negotiation-details">
  <div id="negotiation-overview"></div>

  <ul id="nego-tabs-menu" class="tabs">
    <li class="active"><a href="#nego-figures">Figures</a></li>
    <li><a href="#nego-dates">Dates</a></li>
    <li><a href="#nego-characteristics">Characteristics</a></li>
  </ul>
  <div id="my-tab-content" class="tab-content">
    <div id="nego-figures" class="tab-pane active">figures content</div>
    <div id="nego-dates" class="tab-pane">dates content</div>
    <div id="nego-characteristics" class="tab-pane">characteristics content</div>
  </div>
</div>

Do you have an idea? can it be caused by the fact that the tabs are loaded after DOM? If so, how can I enable them again?

Upvotes: 3

Views: 6473

Answers (2)

Pierre
Pierre

Reputation: 8348

Silly mistake. It turns out I had a second modal window rendered.

My javascript updated the content of the modal based on the class name. By targeting the modal with the right id fixed things.

$('#modal-window .modal-body')

instead of

$('.modal-body')

Upvotes: 2

Halves
Halves

Reputation: 21

I tested your code and it worked after adding a 

"data-toggle"=>"tab"

to each of the tabs menu items, like so:

#negotiation-details
  #negotiation-overview
  %ul#nego-tabs-menu.tabs
    %li.active
      %a{:href => "#nego-figures","data-toggle"=>"tab"} Figures
    %li
      %a{:href => "#nego-dates","data-toggle"=>"tab"} Dates
    %li
      %a{:href => "#nego-characteristics","data-toggle"=>"tab"} Characteristics
  #my-tab-content.tab-content
    #nego-figures.tab-pane.active figures content
    #nego-dates.tab-pane dates content
    #nego-characteristics.tab-pane characteristics content

Ps. Sorry about the haml syntax.

Upvotes: 2

Related Questions