Javascript 使用Ajax时引导导航选项卡在Rails应用程序中不呈现部分

我的用户显示视图中有一个导航选项卡

我想在每个选项卡中渲染部分，我还没有让它工作，我已经花了一整天的时间来解决这个问题。我在stackowerflow上查看了很多帖子，我在Google上搜索了allot，但我永远无法让每个标签都显示每个部分

我对编码很陌生，但我在实践中学习，所以我知道这可能是一场斗争

我现在的代码如下，基本上是这篇文章的副本

有谁能帮我看看这个，我真的没有选择了，非常沮丧

提前谢谢 大地

在my users/show.rb中

<div class="container">
<ul class="nav nav-tabs">

 <li  class="active"><%= link_to "Pappír", {:controller => "users", :action  => "tab"}, :remote => true %></li> 
<li data-toggle="tab" ><%= link_to "Rafmagn", {:controller => "users", :action => "tab"}, :remote => true %></li>
 <li data-toggle="tab" ><%= link_to "Vatn", {:controller => "users", :action => "tab"}, :remote => true %></li>

</ul>

<div class="tab-content">
<div  role="tabpanel" class="tab-pane" id="pappir">

  <%= render 'pages/partials/paper_part' %>
</div>



<div  role="tabpanel" class="tab-pane" id="rafmagn">

  <%= render 'pages/partials/electro_part' %>
</div>

 <div  role="tabpanel" class="tab-pane" id="hwater">

  <%= render 'pages/partials/hwater_part' %>
</div>

在view/users/tab.js.erb中

$('#pappir').html("<%= escape_javascript(render('pages/partials/paper_part')) %>");
$('#rafmagn').html("<%= escape_javascript(render('pages/partials/electro_part')) %>");
$('#hwater').html("<%= escape_javascript(render('pages/partials/hwater_part')) %>");

---

好的，经过长时间的斗争和大量的尝试和错误，我设法使它工作…但在部分图表不断加载，我必须刷新页面以查看图表。。。。但最主要的是让每个部分出现在每个选项卡中

在my users/show.html.erb中，代码如下

<ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#rafmagn_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#rafmagn', id: "rafmagn_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

</ul>

<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>

<div  role="tabpanel" class="tab-pane fade" id="rafmagn">
  <div class="rafmagn">
  <%= render 'pages/partials/electro_part' %>
  </div>
</div>

 <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
  <%= render 'pages/partials/hwater_part' %>
  </div>
</div>

true，“数据切换”=>“选项卡”，“数据目标”=>“#pappir”，id:“pappir_选项卡”%>


true，“数据切换”=>“选项卡”，“数据目标”=>“#rafmagn”，id:“rafmagn_选项卡”%>


true，“数据切换”=>“选项卡”，“数据目标”=>“#hwater”，id:“hwater_选项卡”%>

然后在我的users/show.js.erb中我添加了

if($("#category_tabs li:first-child").hasClass("active")) {
$(".pappir").html("<%= j render(partial: 'pages/partials/paper_part') %>")
$(".rafmagn").html('')
$(".hwater").html('')
} else 

if($("#category_tabs li:nth-child(2)").hasClass("active")) {
$(".rafmagn").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>")
$(".hwater").html('')
$(".pappir").html('')
} else

if($("#category_tabs li:nth-child(3)").hasClass("active")) {
$(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>")
$(".pappir").html('')
$(".rafmagn").html('')
} 

if（$（“#category_tabs li:first child”）.hasClass（“活动”））{
$（“.pappir”）.html（“”）
$（“.rafmagn”）.html（“”）
$（“.hwater”）.html（“”）
}否则
if（$（“#类别标签li:n子项（2）”）.hasClass（“活动”））{
$（“.rafmagn”）.html（“”）
$（“.hwater”）.html（“”）
$（“.pappir”）.html（“”）
}否则
if（$（“#类别标签li:n子项（3）”）.hasClass（“活动”））{
$（“.hwater”）.html（“”）
$（“.pappir”）.html（“”）
$（“.rafmagn”）.html（“”）
} 

---

如果有人知道更好的方法，请发表评论。如果有人知道一种方法，可以在点击时在每个选项卡内刷新部分内容，那么分享知识将非常感激

我一直想弄明白这一点。虽然我确实认为您的方式更易于使用，但这里有更多的“rails”方式可以做到这一点-我知道这肯定可以改进，但这只是一个开始

users/show.html.erb

<ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#rafmagn_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#rafmagn', id: "rafmagn_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

</ul>

<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>

<div  role="tabpanel" class="tab-pane fade" id="rafmagn">
  <div class="rafmagn">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

 <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

if(hwaterLoaded === 0){
    $(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>");
    hwaterLoaded = 1;
}

if(rafmagnLoaded === 0){
    $(".rafmagn").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>");
    rafmagnLoaded = 1;
}

Routes.rb-添加路线，以便我们可以发布到其中

 get '/rafmagn', to: 'users#rafmagn', as: 'rafmagn'

在用户控制器中添加rafmagn操作

def rafmagn
  respond_to do |format|
    format.js
  end
end

现在您可以使用两个不同的JS文件-users/show.JS.erb和users/rafmagn.JS.erb

users/show.js.erb

<ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#rafmagn_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#rafmagn', id: "rafmagn_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

</ul>

<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>

<div  role="tabpanel" class="tab-pane fade" id="rafmagn">
  <div class="rafmagn">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

 <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

if(hwaterLoaded === 0){
    $(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>");
    hwaterLoaded = 1;
}

if(rafmagnLoaded === 0){
    $(".rafmagn").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>");
    rafmagnLoaded = 1;
}

if（hwaterLoaded==0）{
$（“.hwater”）.html（“”）；
hwaterLoaded=1；
}

users/rafmagn.js.erb

<ul role="tablist" id="category_tabs" class="nav nav-tabs">

<li role="presentation" class="active"> 
  <%= link_to "Pappír", "#pappir_tab", 'data-toggle' => 'tab', 'data-target' => '#pappir', id: "pappir_tab"  %>
</li>

<li  role="presentation" >
 <%= link_to "Rafmagn", "#rafmagn_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#rafmagn', id: "rafmagn_tab"  %>
 </li>

<li role="presentation" >
  <%= link_to "Vatn", "#hwater_tab", :remote => true, 'data-toggle' => 'tab', 'data-target' => '#hwater', id: "hwater_tab"  %>
</li>

</ul>

<div class="tab-content categories">
<div  role="tabpanel" class="tab-pane fade in active" id="pappir">
    <div class="pappir">
  <%= render 'pages/partials/paper_part' %>
    </div>
</div>

<div  role="tabpanel" class="tab-pane fade" id="rafmagn">
  <div class="rafmagn">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

 <div  role="tabpanel" class="tab-pane fade" id="hwater">
  <div class="hwater">
   <!-- NOTICE THAT THESE ARE NOW GONE -->
  </div>
</div>

if(hwaterLoaded === 0){
    $(".hwater").html("<%= escape_javascript(render 'pages/partials/hwater_part').html_safe %>");
    hwaterLoaded = 1;
}

if(rafmagnLoaded === 0){
    $(".rafmagn").html("<%= escape_javascript(render 'pages/partials/electro_part').html_safe %>");
    rafmagnLoaded = 1;
}

if（rafmagnload==0）{
$（“.rafmagn”）.html（“”）；
Rafmagnload=1；
}

你的问题是什么？@Jon问题基本上是，为什么标签不起作用？我想不出来。。。。我不明白为什么我不能在选项卡之间切换，但是第一个部分显示在Pappir选项卡中，我可以看到另一个选项卡，但我不能在它们之间切换您的HTML页面（可能通过appliction.HTML.erb布局）加载引导JavaScript吗？e、 类似于中的最后一个标签，因为我正在使用bootstrap gem，所以我的头上没有类似的东西，但我只是以防万一，它也不起作用。