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

Привет, я пытаюсь отображать частичные формы на странице с помощью вкладок.

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

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

view.html.erb

<ul>
 <li id="one"><a href="#" target="_blank">form1</a></li>
 <li id="two"><a href="#" target="_blank">form2</a></li>
 </ul>
 <div id="one">
 <%= render partial: "form1" %>
 </div>
 <div id="two">
 <%= render partial: "form2" %>
 </div>

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

2 ответа

То, что сработало для меня, - это рендеринг с использованием AJAX, модифицированного моим выше html-кодом, как

<ul>
 <li id="one"><a href="#" data-toggle="tab" target="_blank">form1</a></li>
 <li id="two" data-toggle="tab"><a href="#" target="_blank">form2</a></li>
 </ul>
 <div id="one">
 <%= render partial: "form1" %>
 </div>
 <div id="two">
 <%= render partial: "form2" %>
 </div>

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

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

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


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

  • Активировать вкладку с помощью JS:
$('#myTab a').click(function (e) {
 e.preventDefault()
 $(this).tab('show')
})
  • Или по data-attribute:
<!-- Nav tabs -->
<ul role="tablist">
 <li><a href="#home" role="tab" data-toggle="tab" target="_blank">Home</a></li>
 <li><a href="#profile" role="tab" data-toggle="tab" target="_blank">Profile</a></li>
 <li><a href="#messages" role="tab" data-toggle="tab" target="_blank">Messages</a></li>
 <li><a href="#settings" role="tab" data-toggle="tab" target="_blank">Settings</a></li>
</ul>

<!-- Tab panes -->
<div>
 <div id="home">...</div>
 <div id="profile">...</div>
 <div id="messages">...</div>
 <div id="settings">...</div>
</div>

licensed under cc by-sa 3.0 with attribution.