Question

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?

Answer 1

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')