Javascript on Middleman not working

StackOverflow https://stackoverflow.com/questions/20874424

Question

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.

Was it helpful?

Solution 2

(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).

OTHER TIPS

You still haven't quite explained what you mean by "not working", but my guess is that you're getting a 404 for bootstrap.js. The problem is that the Sitemap doesn't know that it should generate a file for the Bootstrap resources - you're meant to include them in your own files using Sprockets' require syntax. If you don't want to do that, you can just use import_asset, as explained in the Middleman Asset Pipeline docs:

ready do
  sprockets.import_asset 'bootstrap.js'
end
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top