如何使用 AJAX 获取每个选项卡的内容？导轨 4，引导程序 3答案

【问题标题】：How do I fetch the content for each tab using AJAX? Rails4, Bootstrap3如何使用 AJAX 获取每个选项卡的内容？导轨 4，引导程序 3
【发布时间】：2014-05-08 03:58:22
【问题描述】：

我在事件页面视图中有 4 个选项卡部分。我让它在请求事件页面时获取并呈现每个选项卡的所有内容的地方工作。这似乎不是一个很好的可扩展性解决方案......

当一个标签被点击时，如何使用 AJAX 获取每个标签的内容？

（第一次做......理论上看起来很简单，但无法让它工作）

我尝试将remote: true 添加到选项卡链接，但这与页内引用效果不佳 - 它对所有选项卡发出相同的获取请求Events#Show，这使得很难确定哪个选项卡内容是请求。如果我将选项卡 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})) %>")

【问题讨论】：

我不是 Rails 人，但据我了解，您需要使用引导选项卡的“show.bs.tab”事件并在该事件中使用 ajax 获取您的内容。我键入了一个答案，但因为我对 Rails 了解不多，所以我想问你是否对仅 HTML/jQuery 的答案感兴趣？
@swazza85 是的，这可能会有所帮助。我可以填写 Rails 方面。

标签： jquery ruby-on-rails ajax twitter-bootstrap

【解决方案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)
    } 
})

【讨论】：

【解决方案2】：

根据 swazza85 的回答，如果您希望它仅加载一次（第一次点击标签时）：

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

        var remoteUrl = $(this).attr('data-tab-remote');
        var loadedOnce = $(this).data('loaded');
        if (remoteUrl !== '' && !loadedOnce) {
            $(currTabTarget).load(remoteUrl)
            $(this).data('loaded',true);
        }
    })

【讨论】：