引导选项卡中的Rails 4 ajax加载内容 [英] Rails 4 ajax load content in bootstrap tab

问题描述

我遇到与但是，我仍然很难理解解决方案.

However, I still find it hard to comprehend the solution.

视图:

/ 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时.

I don't want those three sets of data loaded in each request. Such that when clicking the second tab and @data_tab2 loads.

我发现此代码可能有用:

I found this code that might be useful:

$('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)

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

And I would like to give each tab-pane a partial, how do I dynamically change the partial name in the controller? E.g.

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

我应该使用其他实例变量吗?

Should I use different instance variable?

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片段中所示的相同的数据集.

It keeps rendering the same set of data as shown in the vid clip.

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

请告知.

推荐答案

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

如果您查看 引导程序选项卡标记 ，它说:

If you look at bootstrap tabs markup, it says:

只需在元素上指定data-toggle ="tab"或data-toggle ="pill"，就可以激活标签或药丸导航，而无需编写任何JavaScript

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

因此您的标记必须像这样:

So your markup needs to be like this:

/ 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

注意:您只需要在要显示的标签上应用活动课程即可.

1. 如何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请求

c. Use JS to fire your ajax request

$('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请求发送的选项卡变量来加载选项卡内容.

d. Now you can load tabs content depending on the tab variable send by ajax request.

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:如何动态更改.tab-pane.active，就像我将成员和主持人设置为空的部分时，这样，当我单击成员"选项卡时，该部分将充满ajax数据并添加活动"类到那个窗格?

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?

您无需在此处添加活动类，因为如果您的应用程序中包含bootstrap js，则它将在您单击的选项卡上自动设置活动类，并检出

You don't need to add active class here because if you have bootstrap js in your app then it'll automatically set active class on the tab you'll click, checkout bootstrap docs

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

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

当您单击选项卡时，我们将获得数据目标属性，并将其作为params发送到ajax请求中，然后在js.erb文件中，我们正在检查这些param值以呈现部分内容.

When you click on a tab we get the data-target attribute and send it as params in the ajax request and then in js.erb file we are checking for these param values to render partials.

3.如何防止以前单击的选项卡发送ajax请求?

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

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

Not sure what you mean here but previously clicked tab won't and shouldn't send ajax request. If you are clicking on 2 tabs quickly then that's normal to send 2 ajax requests as in the end it'll always show up the active tab.

这篇关于引导选项卡中的Rails 4 ajax加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！