CODEWITHSUNDEEP
javascriptruby-on-railstwitter-bootstrap
user4584963
user4584963

Reputation: 2523

Can't get bootstrap modal working with rails 4

I am trying to get bootstrap modals to work but so far no success. The details of what I think are the relevant files are below.

Gemfile

source 'https://rubygems.org'

ruby '2.2.2'

gem 'rails', '4.1.7'
gem 'pg', '0.17.1'

gem 'devise', '3.5.2'
gem 'omniauth-facebook'

gem 'simple_form', github: 'plataformatec/simple_form'
gem 'activeadmin', github: 'activeadmin'
gem 'possessive'
# gem 'paperclip', '~> 4.2'
gem 'cocaine', '~> 0.5.3'
# gem 'rmagick'
gem 'aws-sdk'
gem 'carrierwave'
gem 'mini_magick'
gem 'fog'
gem 'newrelic_rpm'
gem 'acts-as-taggable-on'
gem 'acts_as_commentable_with_threading'
gem 'acts_as_votable', '~> 0.10.0'
gem 'leaderboard'
gem 'turbolinks', '2.3.0'
gem 'jquery-turbolinks'
gem 'public_activity'
gem 'figaro'
gem 'will_paginate', '~> 3.0.7'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

# Gems used only for assets and not required
# in production environments by default.
gem 'sass-rails', '~> 5.0.0.beta1'
gem 'coffee-rails', '~> 4.1.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'font-awesome-sass'
gem 'uglifier', '>= 1.0.3'

gem 'jquery-rails', '2.3.0'
gem 'fancybox2-rails', '~> 0.2.8'

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  # automatically runs tests when you save a file, but takes up too much CPU for cloud9 
  # gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'rails_12factor'
  gem 'puma'
end

group :rake do
  gem 'faker'
end

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

application.css.scss

/*
 *= require bootstrap-select.min
 *= require fancybox
 */
@import "bootstrap-sprockets";
@import "bootstrap";

shopping.html.erb

<% provide(:title, 'Shopping') %>
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

I have a 'shopping' action in a controller. When I visit the page /shopping the layout there but the body being yielded is blank. I just copied the code from the bootstrap modals page under static example because I wanted to see if it would work before trying to customize it.

Upvotes: 2

Views: 879

Answers (1)

Sean
Sean

Reputation: 427

In application.js you're missing the core bootstrap js files.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
/* insert bootstrap here */
//= require bootstrap-sprockets
//= require bootstrap-select.min
//= require turbolinks
//= require fancybox
//= require_tree .

Then add an id to your shopping.html.erb view

  <% provide(:title, 'Shopping') %>
  <div class="modal fade" id="myModal"><!--observe new id -->
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Modal title</h4>
        </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- for learning purposed, initalize the modal in a script tag, once you're comfortable add this to a js file-->
<script>$('#myModal').modal('show');</script>

Bootstrap modal is a core js function of the framework. Then inialize it in your Hope that helps.

Upvotes: 2

Related Questions