Rails 4 ajax 在 bootstrap 选项卡中加载内容

我有与描述相同的问题这个帖子 https://stackoverflow.com/questions/23532483/how-do-i-fetch-the-content-for-each-tab-using-ajax-rails4-bootstrap3.

但是，我仍然发现很难理解解决方案。

风景：

/ Nav tabs
%ul.nav.nav-tabs
  %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" }

/ 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

控制器：

def show
  @data_tab1 = User.admin
  @data_tab2 = User.member
  @data_tab3 = User.moderator
end

我不希望在每个请求中加载这三组数据。这样，当单击第二个选项卡时，@data_tab2 就会加载。

我发现这段代码可能有用：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  if ($(target).is(':empty')) {
    $.ajax({
      type: "GET",
      url: "**WHAT SHOULD I PUT IN HERE**",
      error: function(data){
        alert("There was a problem");
      },
      success: function(data){
        $(target).html(data);
      }
  })
 }
})

所以，我想知道：

1. 如何改变每个被点击的选项卡的活动状态

2.如何ajax加载标签数据

Ajax 调用出错。

[Error] TypeError: undefined is not a function (evaluating 'e.target.data("target")')
    (anonymous function) (1, line 3)
    dispatch (jquery.js, line 4642)
    handle (jquery.js, line 4310)
    trigger (jquery.js, line 4551)
    (anonymous function) (jquery.js, line 5261)
    each (jquery.js, line 384)
    each (jquery.js, line 137)
    trigger (jquery.js, line 5260)
    (anonymous function) (bootstrap.js, line 1048)
    next (bootstrap.js, line 1091)
    activate (bootstrap.js, line 1098)
    show (bootstrap.js, line 1043)
    (anonymous function) (bootstrap.js, line 1113)
    each (jquery.js, line 384)
    each (jquery.js, line 137)
    Plugin (bootstrap.js, line 1108)
    clickHandler (bootstrap.js, line 1137)
    dispatch (jquery.js, line 4642)
    handle (jquery.js, line 4310)

我想给每个选项卡窗格一个部分，如何动态更改控制器中的部分名称？例如。

/ Tab panes
.tab-content
  .tab-pane.active#tab1
    = render "tab1"
  .tab-pane.active#tab2
    = render "tab2"
  .tab-pane.active#tab3
    = render "tab3"

我应该使用不同的实例变量吗？

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

OR

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

Update:

它不断渲染视频剪辑中所示的同一组数据。

http://tinypic.com/r/28k5302/8 http://tinypic.com/r/28k5302/8

请指教。

1. 如何更改每个单击选项卡的活动状态

如果你看bootstrap tabs markup http://getbootstrap.com/javascript/#tabs， 它说：

您只需在元素上指定 data-toggle="tab" 或 data-toggle="pill" 即可激活选项卡或药丸导航，而无需编写任何 JavaScript

所以你的标记需要像这样：

/ Nav tabs
%ul.nav.nav-tabs
  %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" }

/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p Fetch content
  .tab-pane#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#details
          %p Fetch details
  .tab-pane#tab3
    %p Fetch content

Note: 您只需在要显示的选项卡上应用活动类。

2. 如何ajax加载标签数据

a. 创建您希望 ajax 请求转到的自定义路由，或者您可以只使用 show 操作。

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

/ Nav tabs
%ul.nav.nav-tabs
  %li.active
    =link_to "Tab1", "#tab1", data: {toggle: "tab", target: "admin", href: "#{your_show_action_path}
  %li
    =link_to "Tab2", "#tab2", data: {toggle: "tab", target: "member", href: "#{your_show_action_path}
  %li
    =link_to "Tab3", "#tab3", data: {toggle: "tab", 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', "#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#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");

我想给每个选项卡窗格一个部分，如何动态更改控制器中的部分名称？我应该使用不同的实例变量吗？

如果内容相同，那么您可以使用相同的部分和相同的实例变量，但如果不同，那么您可以检查目标变量值的参数，然后相应地在 js.erb 中渲染您的部分

Update:

1：如何动态更改 .tab-pane.active，因为我将成员和主持人设置为空部分，这样当我单击“成员”选项卡时，该部分将填充ajax数据并向该窗格添加“活动”类？

您不需要在此处添加活动类，因为如果您的应用程序中有 bootstrap js，那么它会自动在您单击的选项卡上设置活动类，结账bootstrap docs http://getbootstrap.com/javascript/#tabs

2:js.erb如何响应不同的实例变量并渲染不同的partials？

当您单击选项卡时，我们会获取 data-target 属性并将其作为 ajax 请求中的参数发送，然后在 js.erb 文件中检查这些参数值以呈现部分。

3.如何防止之前点击的选项卡发送ajax请求？

不确定你在这里的意思，但之前单击的选项卡不会也不应该发送 ajax 请求。如果您快速单击 2 个选项卡，那么发送 2 个 ajax 请求是正常的，因为最后它总是会显示活动选项卡。