如何使用AJAX获取每个选项卡的内容？ Rails4，Bootstrap3
我在“事件”页面视图中有4个选项卡部分。 我有它工作，当请求事件页面时，获取并呈现每个选项卡的所有内容。 对于可扩展性而言，这似乎不是一个好的解决方案……
单击选项卡时，如何使用AJAX获取每个选项卡的内容？
（第一次这样做……理论上看起来很简单，但却没能让它运转起来）
我尝试将remote: true添加到选项卡链接，但是对于页内引用不能很好 – 它使得相同的获取请求Events#Show所有选项卡，这使得难以确定请求哪个选项卡内容。 如果我将选项卡href更改为各自的控制器链接，则会中断引导选项卡切换。 我无论如何都在失去。
每个选项卡的内容都分为不同的控制器，因此可以获取单个内容。
对于选项卡＃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("")
这将要求您使用bootstrap选项卡的’show.bs.tab’事件。 我不是一个铁杆人，但我在ASP.Net MVC中实现了类似的行为 – 使用ajax在tab上单击动态获取每个选项卡的内容。 由于两者都发出HTML并且我们正在使用ajax，我认为对我有用的东西也适合你。
这里 – 我在标签’data-tab-remote’中添加了一个额外的属性，我在jquery中注册了一个事件处理程序，它从data-tab-remote属性中指定的URL中获取选项卡内容，并将其填充到标签的href中指定的目标标签内容容器。 因此，标签页面的发布HTML看起来像这样 –
使用此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) } })
建立swazza85的答案，如果你只想加载一次 （第一次点击标签）：
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { var currTabTarget = $(e.target).attr('href'); var remoteUrl = $(this).attr('data-tab-remote'); var loadedOnce = $(this).data('loaded'); if (remoteUrl !== '' && !loadedOnce) { $(currTabTarget).load(remoteUrl) $(this).data('loaded',true); } })