Question

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

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

（第一次这样做......理论上看起来很简单，但却没能让它发挥作用）

我尝试将remote: true添加到标签链接，但这与页内引用不相符 - 它为所有标签提供相同的获取请求Events#Show，这使得难以确定请求哪个标签内容。如果我将tab href更改为各自的控制器链接，则会中断bootstrap选项卡切换。我两种方式都在失去。

每个标签的内容都分为不同的控制器，因此可以获取单个内容。

对于选项卡＃2，我需要获取nav-pill处于活动状态的内容。如果我在Tab＃2上，我想将其内容从Overview切换到Details，然后使用nav-pills按钮链接返回。

使用Rails 4 w / bootstrap 3，haml，coffeescript。

事件/ 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

控制器/ 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

这需要你使用bootstrap tab＆＃39; show.bs.tab＆＃39;事件。我不是一个铁杆人，但我在ASP.Net MVC中实现了类似的行为 - 使用ajax在标签点击上动态获取每个标签的内容。由于两者都发出HTML并且我们正在使用ajax，我认为对我有用的东西也适合你。

接下来 - 我在标签页面添加了一个额外的属性＆quot; data-tab-remote＆＃39;我在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)
    } 
})

Answer 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);
        }
    })

如何使用AJAX获取每个选项卡的内容？ Rails 4，Bootstrap 3

2 个答案: