Question

A javascript problem on a rails app.

Twitter docs keep things very straightforward, however I’m still unable to get tabs to work dynamically (tab switching and dropdown). I straight up copied their source code and downloaded their javascript and included that in my application.js file on my rails app. Not sure what I’m missing.

The HTML file:

<script>
  $(function () {
    $('#.tabs').bind('change', function (e) {
      e.target // activated tab
      e.relatedTarget // previous tab
    })
</script>
<h3>Demo</h3>
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
<li class="dropdown" data-dropdown="dropdown">
  <a href="#" class="dropdown-toggle">Dropdown</a>
  <ul class="dropdown-menu">
  <li><a href="#fat">@fat</a></li>
  <li><a href="#mdo">@mdo</a></li>
  </ul>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
  <div class="active tab-pane" id="home">
    <p>Lorem Ipsum.</p>

The Application.js file:

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(document).ready(function(){

!function( $ ){

  "use strict"

  function activate ( element, container ) {
    container
      .find('> .active')
      .removeClass('active')
      .find('> .dropdown-menu > .active')
      .removeClass('active')

    element.addClass('active')

    if ( element.parent('.dropdown-menu') ) {
      element.closest('li.dropdown').addClass('active')
    }
  }

  function tab( e ) {
    var $this = $(this)
      , $ul = $this.closest('ul:not(.dropdown-menu)')
      , href = $this.attr('href')
      , previous
      , $href

    if ( /^#\w+/.test(href) ) {
      e.preventDefault()

      if ( $this.parent('li').hasClass('active') ) {
        return
      }

      previous = $ul.find('.active a').last()[0]
      $href = $(href)

      activate($this.parent('li'), $ul)
      activate($href, $href.parent())

      $this.trigger({
        type: 'change'
      , relatedTarget: previous
      })
    }
  }


 /* TABS/PILLS PLUGIN DEFINITION
  * ============================ */

  $.fn.tabs = $.fn.pills = function ( selector ) {
    return this.each(function () {
      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
    })
  }

  $(document).ready(function () {
    $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
  })

}( window.jQuery || window.ender );

});

Answer 1

I fired up the javascript console on Chrome and realized that my scripts weren’t being loaded. This is because on rails, you don’t need to include the “public” file in your path to load the javascript; only is needed.

In addition, in the application.hmtl.erb file, <%= javascript_include_tag ‘bootstrap-dropdown.js’ %> must be included as :default does not load these js files.