如何使用AJAX提取每个标签的内容？Rails4，Bootstrap3

Question

我在“事件”页面视图中有4个选项卡部分。我可以在请求事件页面时提取并呈现每个选项卡的所有内容的地方工作。对于扩展性来说，这似乎不是一个好的解决方案。

单击选项卡时，如何使用AJAX获取每个选项卡的内容？

（第一次进行…理论上看起来很简单，但是无法正常工作）

我尝试添加remote: true到选项卡链接，但与页面内引用无法很好地结合-
Events#Show对所有选项卡都执行相同的get请求，这使得很难确定请求的选项卡内容。如果将选项卡href更改为它们各自的控制器链接，则会中断引导程序选项卡的切换。我这两种方式都没有。

每个选项卡的内容都分为单独的控制器，因此可以提取单个内容。

对于Tab＃2，我需要获取有效的内容nav-pill。如果我在Tab＃2上，我想将其内容从“概述”切换到“详细信息”，然后使用nav- pills按钮链接返回。

使用带有Bootstrap 3，Haml和CoffeeScript的Rails 4。

events / show.html.haml

/ Nav tabs
%ul.nav.nav-tabs.color
  %li.active
    =link_to "Tab1", "#tab1", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab2", "#tab2", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab3", "#tab3", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab4", "#tab4", html_options = { "data-toggle" => "tab" }

/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p Fetch content
  .tab-pane.active#tab2
    %ul.nav.nav-pills
      %li.active= link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"}
      %li= link_to 'Details', "#details", html_options = { "data-toggle" => "tab"}
      .tab-content
        .tab-pane.active#overview
          %p Fetch overview
        .tab-pane.active#details
          %p Fetch details
  .tab-pane.active#tab3
    %p Fetch content
  .tab-pane.active#tab4
    %p Fetch content

controllers / events_controller.rb

def show
  # currently have several database queries to get data for each tab :(

  respond_to do |format|
    format.html
    format.js
  end
end

views / events / show.js.erb （是这种remote:true情况，但是应该在每个选项卡的相应控制器视图中）

$('div#tab2').append("<%= escape_javascript(render(partial: 'overview', locals: {names: @names, genders: @genders, ages: @ages})) %>")

Answer 1

这将需要您使用引导选项卡的“ show.bs.tab”事件。我不是Rails家伙，但我在ASP.Net MVC中实现了类似的行为-
使用Ajax在标签页单击中动态获取每个标签页的内容。由于两者都发出HTML，并且我们都在使用ajax，因此我认为对我有用的内容也对您有用。

顺其自然-我在标签“ data-tab-remote”中添加了额外的属性，并在jquery中注册了一个事件处理程序，该事件处理程序从data-tab-
remote属性中指定的URL提取标签内容。标签的href中指定的目标标签内容容器。因此，标签页发出的HTML看起来像这样-

<ul class="nav nav-tabs" style="border-right:solid" id="tabs">
    <li><a href="#tab1" data-toggle="tab" data-tab-remote="/tab1url">Tab1</a></li>
    <li><a href="#tab2" data-toggle="tab" data-tab-remote="/tab2url">Tab2</a></li>
</ul>            
<div class="tab-content">
    <div class="tab-pane fade" id="tab1">

    </div>
    <div class="tab-pane fade in active" id="tab2">

    </div>
</div>

使用此HTML，您需要在文档的加载事件处理程序中调用以下jQuery代码-

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    currTabTarget = $(e.target).attr('href');

    var remoteUrl = $(this).attr('data-tab-remote')
    if (remoteUrl !== '') {

        $(currTabTarget).load(remoteUrl)
    } 
})