CODEWITHSUNDEEP
javascriptjqueryruby-on-railstwitter-bootstraphaml
Tony Gaeta
Tony Gaeta

Reputation: 126

Bootstrap Active Tab in a Rails View

Tab Will Not Change Active State

I've had some difficulties getting the BS tabs to change to an 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've tried following the BS guide but can't get it to work. I've tried swapping out data-toggle with data-target. I've removed data-toggle completely. The best I've gotten it to do is show the shadow when I hover over another tab; however, it continues to show the first tab as active.

Upvotes: 6

Views: 3756

Answers (3)

Tony Gaeta
Tony Gaeta

Reputation: 126

Turns out it was rendering the same partial. Using ajax to render the view solved this.

The fix:

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

Upvotes: 0

killebytes
killebytes

Reputation: 980

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

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

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

Upvotes: 0

Wally Altman
Wally Altman

Reputation: 3545

The section of the guide that you've linked only shows you how to get the content to change when you click on a tab. In order to get the tabs themselves to draw properly, whenever you switch tabs, you need to set the active class on the new tab and remove it from the no-longer-active tab.

You might try something like this:

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

Upvotes: 1

Related Questions