Html 在引导中使用导航栏选项卡渲染Rails部分表单
您好,我正在尝试使用选项卡在页面中呈现部分表单 我有_form1.html.erb和_form2.html.erb 因此,my view.html.erb应该基于选项卡式菜单呈现表单 view.html.erbHtml 在引导中使用导航栏选项卡渲染Rails部分表单,html,ruby-on-rails,twitter-bootstrap,Html,Ruby On Rails,Twitter Bootstrap,您好,我正在尝试使用选项卡在页面中呈现部分表单 我有_form1.html.erb和_form2.html.erb 因此,my view.html.erb应该基于选项卡式菜单呈现表单 view.html.erb <ul class="nav nav-tabs"> <li id ="one"class="active"><a href="#">form1</a></li> <li id
<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的项目。您需要确保已经导入了所需的JavaScript文件。如图所示,此组件依赖于Javascript:
- 使用JS激活选项卡:
$(“#myTab a”)。单击(函数(e){
e、 预防默认值()
$(this.tab('show'))
})
- 或通过
:数据属性
...
...
...
...
对我有效的方法是使用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') %>");
$(“#一”).html(“”);
$(“#两”).html(“”);
修复了我的问题您的HREF没有指向任何地方:我选择了选项卡,但根据所选选项卡显示了内容完整的内容显示我不确定我是否理解该问题。但是如果使用
数据属性
方法,则必须将href
属性设置为要打开的选项卡的ID。在JS版本中,您必须有类似于$('#myTab a[href=“#profile”]').tab('show')的内容
为了打开一个选项卡,将href
值设置为#profile
。实际上,当我输入纯文本时,文本是可见的,但当我想呈现部分表单时,两个表单都会显示出来。这是我试图实现的完整代码