Рендеринг частичных форм Rails с использованием вкладок Nav Bar в Bootstrap

Question

Здравствуйте, я пытаюсь визуализировать частичные формы на странице с помощью вкладок.

У меня есть _form1.html.erb и _form2.html.erb

поэтому мой view.html.erb должен отображать формы на основе меню с вкладками

view.html.erb

  <ul class="nav nav-tabs">
           <li id ="one"class="active"><a href="#">form1</a></li>
           <li id="two"><a href="#">form2</a></li>
     </ul>
    <div id="one">
    <%= render partial: "form1" %>
    </div>
    <div id="two">
    <%= render partial: "form2" %>
    </div>

но это не работает, что я делаю не так? я получаю сообщение об ошибке Не могу найти проект с 'project_id'=form1

Answer 1

Что сработало для меня, так это рендеринг с использованием AJAX, модифицировавшего мой HTML-код

<ul class="nav nav-tabs">
           <li id ="one"class="active"><a href="#" data-toggle="tab">form1</a></li>
           <li id="two" data-toggle="tab"><a href="#">form2</a></li>
     </ul>
    <div class="tab-pane " id="one">
    <%= render partial: "form1" %>
    </div>
    <div class="tab-pane " id="two">
    <%= render partial: "form2" %>
    </div>

и создал новый index.js.erb и в этом

$("#one").html("<%= j (render 'form1') %>");
$("#two").html("<%= j (render 'form2') %>");

исправил проблему для меня

Answer 2

Вы должны убедиться, что вы уже импортировали требуемый файл JavaScript. Как вы можете видеть в документации, этот компонент основан на Javascript:

• Активировать вкладку с помощью JS:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

• Или data-attribute:

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>