Can't load zurb foundation javascript

Question

Edit

I decided to use twitter-bootstrap-rails instead, I don't need a answer.

Edit end

I want to use zurb-foundation tab function in my rails project, but it doesn't working like this image.

It looks like javascript is not loaded, but I couldn't find out the reason.

I added two lines in Gemfile.

gem 'compass-rails'
gem "foundation-rails"

And bundle install, then rails g foundation:install.

app/assets/javascripts/application.js have lines like this.

//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

and app/assets/stylesheets/application.css is like this.

 /*
 *= require_self
 *= require foundation_and_overrides
 *= require foundation
 *= require_tree .
 */

I copied and pasted sample html code from foundation web page.

<p id="notice"><%= notice %></p>
<dl class="tabs">
  <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
  <dd><a href="#simple2">Simple Tab 2</a></dd>
  <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
  <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
  <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
  <li id="simple3Tab">This is simple tab 3s content.</li>
</ul>

rails server log indicates that foundation javascript is properly loaded.

Started GET "/assets/foundation.css?body=1" for 127.0.0.1 at 2014-04-21 06:20:31 +0900
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:31 +0900
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:31 +0900
Started GET "/assets/foundation/foundation.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.abide.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.accordion.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.alert.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.clearing.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.dropdown.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.interchange.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.joyride.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.magellan.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.offcanvas.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.orbit.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.reveal.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.slider.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.tab.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.tooltip.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.topbar.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.equalizer.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900

I checked console log by developer tool in chrome, but there was no error recorded.

What else can I do to fix the problem?

Answer 1

As per the shared code, I don't see the details of application.css file. For the zurb-foundation css to work, you would need to add the following in your app/assets/stylesheets/application.css file:

*= require foundation

UPDATE

As per the update in the question for application.css.

1. First you need to rename application.css to application.css.scss.

2. Then in foundation_and_overrides.scss add the following directive at the top.

   @import "foundation"; 
   

3. Assuming that foundation_and_overrides.scss exists in app/assets/stylesheets folder, you don't need to require it in application.css.scss. So, application.css.scss should only have

   *= require_self
   *= require_tree .
   

Also, you can see the details in Zurb Foundation Documentation