Question

I bought a theme on ThemeForest that uses a bunch of jQuery plugins (easytabs, datepicker, etc). I am trying to get them to work in my Rails application. None of them do. Here is what I think I need to do to get them to work:

1) copy the jQuery plugin to the vendor/assets/javascripts folder
2) require it in the application.js file
3) call it in the [view].js.coffee file – in my case contacts.js.coffee
4) put the required HTML into the [view].html.erb file (no javascript, or the like, just inserting the appropriate ID’s, etc into the section that the jQuery plugin is going to manipulate

I am clearly missing something because none of them work. The only jQuery plugin that I have working is the DataTables one, but I followed a RailsCast for it, and installed it using its gem. The RailsCast mentions, “fortunately, there’s a gem for this or we’d have to go through and fix the broken image links…”

I’m new to Rails / web development, and I’ve been banging my head on this wall for a couple days now, so I don’t want to blindly start updating links in a jQuery file.

How should I go about troubleshooting this?

Here the the code I’ve (mostly) cut and pasted:

from Application.js:

 WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require plugins/ui/jquery.easytabs.min
//= require_tree .

from properties.js.coffee:

# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
jQuery ->
  $('#properties').dataTable
    sPaginationType: "full_numbers"
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#properties').data('source')
  $('#tab-container').easytabs
    animationSpeed: 300,
    collapsible: false,
    tabActiveClass: "clicked"

from index.html.erb of properties:

<!-- Tabs -->
        <div class="fluid">
            <div class="widget grid6">       
                <ul class="tabs">
                    <li><a href="#tabb1">Tab active</a></li>
                    <li><a href="#tabb2">Tab inactive</a></li>
                </ul>

                <div class="tab_container">
                    <div id="tabb1" class="tab_content">
                        Tab is active and has left tabs             
                    </div>
                    <div id="tabb2" class="tab_content"> This tab is active now</div>
                </div>  
                <div class="clear"></div>        
            </div>

            <div class="widget grid6 rightTabs">       
                <ul class="tabs">
                    <li><a href="#tabb3">Tab active</a></li>
                    <li><a href="#tabb4">Tab inactive</a></li>
                </ul>
                <div class="tab_container">
                    <div id="tabb3" class="tab_content">
                        Tab is active and has right tabs               
                    </div>
                    <div id="tabb4" class="tab_content"> This tab is active now</div>
                </div>  
                <div class="clear"></div>        
            </div>
        </div>

Here is my github account, if you really want to see what I’ve done, in all its glory
https://github.com/jonlehman/REAPP

Answer 1

In your coffeescript you write

$('#tab-container').easytabs

Yet in your html there is no element with id tab-container, but you do use a class called tab_container (note the underscore), so your coffeescript should be

$('.tab_container').easytabs

Hope this helps.