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

您需要确保已导入所需的JavaScript文件。正如您在documentation中看到的，此组件依赖于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>

Answer 2

对我有用的是使用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') %>");

为我解决了这个问题

使用Bootstrap中的Nav Bar选项卡渲染Rails部分表单

2 个答案: