Active Bootstrap Tab in Rails Mode

Question

I’m having difficulty transitioning the BS tabs to the active state

index.html.haml

- if @tabs %ul#tabs.nav.nav-tabs{:role => "tablist"} %li.active{:role => "presentation"} = link_to "All", search_jobs_path(tab: "ALL"), {"aria-controls" => "home", :role => "tab"} - @tabs.each do |tab| %li{:role => "presentation"} = link_to tab, search_jobs_path(tab: tab), {"aria-controls" => "home", :role => "tab"} :javascript $('#tabs').click(function (e) { e.preventDefault() $(this).tab('show') }) .tab-content = render partial: 'jobs/list', locals: { jobs: @jobs } 

I tried following the BS manual but cannot make it work. I tried replacing data-toggle with data-target . I completely deleted data-toggle . The best I have done is to show a shadow when I visit over another tab; however, it continues to show the first tab as active.

Answer 1

It turns out that it was the same partial. Using ajax to display the view resolved this.

Correction:

index.html.haml:

 %ul.accordion-tabs %li.tab-header-and-content %a.tab-link.is-active{:href => "/jobs/search?tab=ALL"} All .tab-content{:data => { :url => "/jobs/search?tab=ALL&inline=true" }} = render partial: 'jobs/list', locals: { jobs: @jobs } .loading{style: 'display:none;'} = image_tag "spinner.gif" %p Loading - @tabs.each do |tab| %li.tab-header-and-content %a.tab-link{:href => "/jobs/search?tab=#{tab}"} #{tab.capitalize} .tab-content{:data => { :url => "/jobs/search?tab=#{tab}&inline=true" }} .loading = image_tag "spinner.gif" %p Loading 

jobs_controller.rb:

 if params[:inline] render partial: 'jobs/list', locals: { jobs: @jobs }, layout: false else render :index end 

jobs.js.coffee:

 $(document).on 'page:change', -> $('.accordion-tabs').each (index) -> $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show() $('.accordion-tabs').on 'click', 'li > a.tab-link', (event) -> accordionTabs = undefined nextTab = undefined if !$(this).hasClass('is-active') event.preventDefault() accordionTabs = $(this).closest('.accordion-tabs') accordionTabs.find('.is-open').removeClass('is-open').hide() nextTab = $(this).next() nextTab.toggleClass('is-open').toggle() accordionTabs.find('.is-active').removeClass 'is-active' $(this).addClass 'is-active' nextTab.find('.loading').show() nextTab.find('.loading p').text 'Loading' $.ajax url: nextTab.data('url') success: (data) -> nextTab.html data nextTab.find('.loading').hide() error: -> nextTab.find('.loading p').text 'Error' else event.preventDefault() 

Answer 2

The section of the manual that you linked shows only how to change the content when you click on the tab. To make the tabs draw correctly on their own, whenever you switch tabs, you need to set the active class to a new tab and remove it from the tab without a more active one.

You can try something like this:

 $('#tabs').click(function (e) { e.preventDefault() $("#tabs li").removeClass('active') $(this).parent().addClass('active') $(this).tab('show') }) 

Answer 3

add data-toggle="tab" to <a>

and change $('#tabs').click to $('#tabs a').click

working sample here: http://jsfiddle.net/killerbytes/syrywhkn/