我如何获取使用AJAX每个选项卡的内容？ Rails4，Bootstrap3 [英] How do I fetch the content for each tab using AJAX? Rails4, Bootstrap3
问题描述
我有一个活动页面视图4选项卡部分。我有工作，所有的每个选项卡中的内容被取出，并请求事件页面时呈现。这似乎并不像可扩展性很好的解决方案...
我如何获取使用AJAX时，单击一个选项卡上的每个选项卡中的内容？
（第一次做...看起来在理论上很简单，但没有得到它的工作）
我尝试添加远程：真正的的标签链接，但并不与在页面引用发挥出色 - 它使相同的get请求活动＃显示所有这使得它来确定请求的选项卡的内容困难的选项卡。如果我更改选项卡HREF的各自的控制器连接，那么它打破了引导标签切换。我失去两种方式。
每个选项卡的内容被分成独立的控制器，以便单独的内容可以被读取。
有关标签＃2，我需要获取对这些曾经导航丸是活动的内容。如果我在标签＃2，我想使用的资产净值，药按钮链接从概述切换其内容的细节和背部。
使用Rails 4W /引导3，HAML，CoffeeScript的。
事件/ show.html.haml
/导航标签
％ul.nav.nav-tabs.color
％li.active
=的link_toTAB1，＃TAB1，html_options = {数据肘节=＆GT; 标签}
％李
=的link_toTAB2，＃TAB2，html_options = {数据肘节=＆GT; 标签}
％李
=的link_toTAB3，＃TAB3，html_options = {数据肘节=＆GT; 标签}
％李
=的link_toTAB4，＃TAB4，html_options = {数据肘节=＆GT; 标签}
/标签面板
.TAB内容
.TAB-pane.active＃TAB1
％P取含量
.TAB-pane.active＃TAB2
％ul.nav.nav药丸
％li.active =的link_to概述，#overview，html_options = {数据切换=＆GT; 标签}
％李=的link_to详细资料，#details，html_options = {数据切换=＆GT; 标签}
.TAB内容
.TAB-pane.active＃概述
％P取概述
.TAB-pane.active＃细节
％P获取详细信息
.TAB-pane.active＃TAB3
％P取含量
.TAB-pane.active＃TAB4
％P取含量
控制器/ events_controller.rb
高清节目
＃目前有多个数据库查询得到的数据为每个标签:(
respond_to代码做|格式|
的format.html
format.js
结束
结束
观点/事件/ show.js.erb （这是为远程：真正的情况，但应该是在为各自的控制器视图每个标签）
$（'＃DIV TAB2）追加（＆LT;％= escape_javascript（渲染（部分：概述，当地人：{名称：@names，性别：@genders ，年龄：@ages}））％＆gt;中）
这将要求您使用引导程序选项卡的show.bs.tab事件。我不是一个轨道的人，但我实现了类似的行为在ASP.Net MVC - 动态提取每个选项卡的内容在选项卡上单击使用AJAX。由于这两种产生HTML，我们使用的是阿贾克斯，我想为我工作也会为你工作。
下面去 - 我增加了一个额外的属性选项卡数据制表远程和我登记在jQuery中的事件处理程序获取从数据制表远程属性，并填充指定的URL的选项卡的内容成在标签的href指定的目标标签内容的容器。所以发出的HTML标签页将是这个样子 -
＆LT; UL类=净值资产净值 - 片的风格=右边框：固体ID =标签＆GT;
＆LT;李＆GT;＆LT; A HREF =＃TAB1数据切换=选项卡数据制表远程=/ tab1url＆GT; TAB1＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃TAB2数据切换=选项卡数据制表远程=/ tab2url＆GT; TAB2＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV CLASS =标签内容＆GT;
＆LT; DIV CLASS =选项卡窗格变脸ID =TAB1＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS = ID =TAB2＆GT在当前标签窗格变脸;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
通过这个HTML，你就需要调用下面的jQuery的code文档中的负载事件处理 -
$（'A [数据切换=标签]'）。在（'show.bs.tab'，功能（五）{
currTabTarget = $（e.target）.attr（HREF'）;
VAR remoteUrl = $（本）.attr（数据制表远程）
如果（remoteUrl！==''）{
$（currTabTarget）.load（remoteUrl）
}
}）
I have 4 tab sections in an Event page view. I have it working where ALL the content for each tab is fetched and rendered when an Event page is requested. This doesn't seem like a good solution for scalability...
How do I fetch the content for each tab using AJAX when a tab is clicked on?
(First time doing it... looks simple in theory but failing to get it working)
I tried adding remote: true to the tab links but that doesn't play well with the in-page references - it makes the same get request Events#Show for all the tabs which makes it difficult to determine which tab content is requested. If I change the tab href's to their respective controller links, then it breaks the bootstrap tab switching. I'm loosing either way.
Each tab's content is broken into separate controllers so individual content can be fetched.
For Tab#2, I need to fetch the content for which ever nav-pill is active. And if I'm on Tab#2, I want to switch its content from Overview to Details and back using the nav-pills button links.
Using Rails 4 w/ bootstrap 3, haml, coffeescript.
events/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
controllers/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 (This was for the remote:true case but should be in the respective controller view for each tab)
$('div#tab2').append("<%= escape_javascript(render(partial: 'overview', locals: {names: @names, genders: @genders, ages: @ages})) %>")
This would require you to make use of bootstrap tab's 'show.bs.tab' event. I'm not a rails guy but I've implemented similar behaviour in ASP.Net MVC - fetch the content of each tab dynamically on tab click using ajax. Since both emit HTML and we are using ajax, I reckon what worked for me will also work for you.
Here goes - I've added an extra attribute to the tabs 'data-tab-remote' and I register an event handler in jquery that fetches the tab content from the URL specified in the data-tab-remote attribute and populates it into the target tab-content container specified in the tab's href. So the emitted HTML for the tabs page would look something like this -
<ul class="nav nav-tabs" style="border-right:solid" id="tabs">
<li><a href="#tab1" data-toggle="tab" data-tab-remote="/tab1url">Tab1</a></li>
<li><a href="#tab2" data-toggle="tab" data-tab-remote="/tab2url">Tab2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
</div>
<div class="tab-pane fade in active" id="tab2">
</div>
</div>
With this HTML, you'll need to call the below jQuery code in your document's on load event handler -
$('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)
}
})
这篇关于我如何获取使用AJAX每个选项卡的内容？ Rails4，Bootstrap3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
