Search code examples
rubytwitter-bootstrapmiddleman

Javascript on Middleman not working

My bootstrap javascript does not seem to be working. They stylesheet however is working just fine, both source and build does not load javascript (for example navbar-collapse)

config.rb

set :css_dir, 'stylesheets'

set :js_dir, 'javascripts'

set :images_dir, 'images'

layout.rb

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine or request Chrome Frame -->
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <!-- Use title if it's in the page YAML frontmatter -->
    <title><%= current_page.data.title || "The Middleman" %></title>

    <%= stylesheet_link_tag "bootstrap", "custom", "font-awesome" %>
    <%= javascript_include_tag  "bootstrap", "custom" %>
  </head>

  <body>
    <%= partial "/partials/navbar" %>
    <%= yield %>
    <%= partial "/partials/footer" %>
  </body>
</html>

partials/_navbar.html.erb

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" style="font-size:25px;color:#2ecc71" href="index.html"><i class="fa fa-play-circle-o fa-md"></i>Brand</a>
      </div>


      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">About</a></li> 
          <li><a href="#">Faq</a></li> 
        </ul>
      </div>

    </div>
  </nav>

Gemfile

# If you have OpenSSL installed, we recommend updating
# the following line to use "https"
source 'http://rubygems.org'

gem "middleman", "~>3.2.1"

# Live-reloading plugin
gem "middleman-livereload", "~> 3.1.0"

gem "middleman-gh-pages"

Well I have used twitter bootstrap CSS and JS, data-toggle="collapse" on navigation would not collapse on mobile devices.

Solution

  • (Your question has nothing to do with ruby-on-rails, you should remove this tag.)

    Your HTML markup is working when the Bootstrap JavaScript and CSS assets are loaded correctly: http://codepen.io/riddla/full/GgtJc.

    Maybe you are missing the required jQuery asset? See http://getbootstrap.com/javascript/#js-overview:

    Plugin dependencies

    Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).