如何使用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

回答

相關問題