ruby-on-rails – Rails 4 ajax在引导选项卡中加载内容

1. how to change the active state of each clicked tab

如果你看一下bootstrap tabs markup,它会说：

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle=”tab” or data-toggle=”pill” on an element

所以你的标记必须是这样的：

/ Nav tabs
%ul.nav.nav-tabs
  %li.active
    =link_to "Tab1",html_options = { "data-toggle" => "tab" }

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

注意：您只需要在要显示的选项卡上应用活动类.

2. how to ajax load tab data

一个.创建您希望ajax请求进入的自定义路由,或者您可以使用show动作.

湾我们需要添加一些数据属性,以便我们知道正在单击哪个选项卡.然后我们可以在后端定位它.

/ Nav tabs
%ul.nav.nav-tabs
  %li.active
    =link_to "Tab1",data: {toggle: "tab",target: "admin",href: "#{your_show_action_path}
  %li
    =link_to "Tab2",target: "member",href: "#{your_show_action_path}
  %li
    =link_to "Tab3",target: "moderator",href: "#{your_show_action_path}
/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p // this will be activated by default so you can load default content here
  .tab-pane#tab2
    %ul.nav.nav-pills
      %li.active
        = link_to 'Overview',html_options = { "data-toggle" => "tab"}
      .tab-content
        .tab-pane.active#overview
          %p Fetch overview
        .tab-pane#details
          %p Fetch details
  .tab-pane#tab3
    %p Fetch content

C.使用JS来激发你的ajax请求

$('a[data-toggle="tab"]').on('shown.bs.tab',function (e) {
  var target = $(this).data("target");
  var href = $(this).data("href");
  $.ajax({
    type: "GET",url: href,data: {tab: target},dataType: "script"
  });
})

d.现在,您可以根据ajax请求发送的选项卡变量加载选项卡内容.

def show
  @data_tab = User.admin
  @data_tab = User.member if params[:tab] == "member"
  @data_tab = User.moderator if params[:tab] == "moderator"
end

#show.js.erb
$(".tab-pane.active").html("your content here");

And I would like to give each tab-pane a partial,how do I dynamically change the partial name in the controller? Should I use different instance variable?

如果内容相同,那么您可以使用相同的部分和相同的实例变量,但如果它不同,那么您可以检查params以获取目标变量的值,然后相应地在js.erb中呈现您的部分

更新：

1: How to dynamically change .tab-pane.active,as I would set member and moderator empty partials such that when I click “member” tab,the partial will be filled with ajax data and add an “active” class to that pane?

您不需要在此处添加活动类,因为如果您的应用程序中有引导程序js,那么它将自动在您单击的选项卡上设置活动类,结账时间为bootstrap docs

2:How can js.erb respond to different instance variables and render different partials?

当您单击选项卡时,我们获取data-target属性并将其作为params发送到ajax请求中,然后在js.erb文件中我们检查这些param值以呈现partials.

3.How to prevent previously clicked tab to send an ajax request?

不确定你的意思,但之前点击的标签不会也不应该发送ajax请求.如果您快速单击2个选项卡,那么发送2个a??jax请求是正常的,因为它最终会显示活动选项卡.