如何使用AJAX获取每个选项卡的内容？Rails4,Bootstrap3

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选项卡的'show.bs.tab'事件.我不是一个铁人,但我在ASP.Net MVC中实现了类似的行为 - 使用ajax在tab上单击动态获取每个选项卡的内容.由于两者都发出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)
    } 
})