如何使用AJAX为每个标签获取内容？ Rails4，Bootstrap3

我在事件页面视图中有4个选项卡部分。我有它的工作地点，每个选项卡的所有内容都是在请求事件页面时获取和渲染的。这似乎不是一个好的解决方案的可伸缩性...如何使用AJAX为每个标签获取内容？ Rails4，Bootstrap3

如何获取每个选项卡的内容使用AJAX时，单击一个选项卡？

（第一次做...看起来在理论上很简单，但没有得到它的工作）

我尝试添加remote: true到标签联系，但不与在页面引用发挥出色 - 它对所有选项卡进行相同的获取请求Events#Show，这使得难以确定请求哪个选项卡内容。如果我将选项卡href更改为它们各自的控制器链接，那么它将打破引导选项卡切换。我失去了任何一种方式。

每个标签的内容被分成独立的控制器，因此可以获取单独的内容。

对于选项卡＃2，我需要获取以前nav-pill处于活动状态的内容。如果我在选项卡2上，我想将其内容从概览切换到详细信息，并使用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

视图/活动/ show.js.erb（这是为remote:true的情况，但应在每个选项卡的相应控制器视图中）

$('div#tab2').append("<%= escape_javascript(render(partial: 'overview', locals: {names: @names, genders: @genders, ages: @ages})) %>")

来源

2014-05-08 HM1

我不是一个轨道的人，但据我了解，您想要重新要求使用引导选项卡的“show.bs.tab”事件并在该事件中使用ajax获取您的内容。我输入了一个答案，但是因为我对Rails了解不多，所以我会问你是否对HTML/jQuery只有答案感兴趣？ – swazza85

@ swazza85是的，这可能会有所帮助。我可以填写Rails一面。 – HM1

这将需要您使用引导选项卡的'show.bs.tab'事件。我不是一个铁杆人，但我在ASP.Net MVC中实现了类似的行为 - 使用ajax在标签点击时动态获取每个标签的内容。既然这两个都发布HTML，我们使用Ajax，我认为对我来说什么工作也适用于你。

在这里 - 我添加了一个额外的属性到选项卡'data-tab-remote'，我在jquery中注册了一个事件处理程序，它从data-tab-remote属性中指定的URL中获取标签内容并将其填充到选项卡的href中指定的目标选项卡内容容器中。所以对于标签页发出的HTML会是这个样子 -

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

有了这个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) 
    } 
})

来源

2014-05-08 16:20:14 swazza85

建立关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); 
     } 
    })

来源

2015-04-28 15:36:33 prograhammer

如何使用AJAX为每个标签获取内容？ Rails4，Bootstrap3

回答

相关问题