Encountering a JavaScript issue within a Rails application.
Although Twitter's documentation is very clear, I'm still struggling to make dynamic tabs work (tab switching and dropdown). I even went ahead and copied their source code, downloaded their JavaScript files and incorporated them into my application.js file in my Rails app. Can't seem to figure out what I'm doing wrong.
Here's the HTML snippet:
<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 content of Application.js file is as follows:
// Your custom JavaScript functions and classes go here
// This file gets automatically included using 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
})
}
}
/* PLUGIN DEFINITION FOR TABS AND PILLS
* ============================ */
$.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);
});