Question

我遇到与this post中描述的问题相同的问题。

但是，我仍然难以理解解决方案。

观点：

/ 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)

我想给每个标签窗格分一部分，如何动态更改控制器中的部分名称？ E.g。

/ 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

更新

它会继续渲染与vid剪辑中显示的相同的数据集。

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

请告知。

Answer 1

如何更改每个点击标签的有效状态

如果你看bootstrap tabs markup，就说：

您可以通过简单地指定data-toggle =＆＃34; tab＆＃34;来激活标签页或药丸导航，而无需编写任何JavaScript。或数据切换=＆＃34;丸＆＃34;在一个元素上

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

/ 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

注意：您只需要在要显示的标签上应用有效课程。

如何加载标签数据

一个。 创建您希望ajax请求转到的自定义路由，或者您可以使用show动作。

湾我们需要添加一些数据属性，以便我们知道要点击哪个标签。然后我们可以在后端定位它。

/ 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

℃。使用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");

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

如果内容相同，则可以使用相同的部分和相同的实例变量，但如果它不同，则可以检查params以获取目标变量的值，然后相应地在js.erb中渲染部分

<强>更新

1：如何动态更改.tab-pane.active，因为我会设置成员和主持人空的部分，以便当我点击＆＃34; member＆＃34;选项卡，部分将填充ajax数据并添加＆＃34;活动＆＃34;该窗格的类？

您不需要在此处添加有效课程，因为如果您的应用中有自举式js，那么它会在您点击的标签上自动设置有效课程，结帐bootstrap docs

2：js.erb如何响应不同的实例变量并呈现不同的部分？

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

3.如何阻止先前点击的标签发送ajax请求？

不确定您的意思，但之前点击的标签不会发送，并且不应该发送ajax请求。如果您快速点击2个标签，那么发送2个ajax请求是正常的，因为它最终会显示活动标签。

Answer 2

要更改标签的有效状态，您需要为其添加active课程（并将其从之前的标签中删除）
要加载数据，您需要将您的ajax请求url放入显示操作的路径（使用参数日期指示需要加载的标签）。或者你可以通过远程链接来做到这一点 - 有很好的样本here

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

2 个答案: