Bootstrap 3 Modal with Rails 4 not showing

Question

I asked a question relating to this issue the other day, but encountered another error. I have Index.html.erb with a link_to calling the modal. Once the modal is open I want the body of it to include a partial. Most of my code is from the Bootstrap example because I want to get it working first before I include all my form details in the partial.

gemfile:

group :assets do
    gem 'sass-rails', '4.0.1'
    gem 'bootstrap-sass', '3.0.2.0'
    gem 'bootstrap-modal-rails'
end

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap/modal
//= require_tree .

Index.html.erb (In views/gifts)

<p><%= link_to 'Buy', gift_path(gift), {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#myModal', :class => "btn btn-primary ", :id => 'myModal'} %></p>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                <%= render 'gifts/show' %>
              </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 -->

_show.html.erb (In views/gifts/)

<p>This is a gift.</p>

gifts.js.coffee (In assets/javascripts/)

$('#myModal').modal('options')

gifts.controller.rb (Just the show function)

   def show
        @gift = Gift.find(params[:id])
        respond_to do |format|
          format.html {render :show}
          format.json { head :ok}
        end
    end

When I click the button in the browser, my rails terminal show this:

Processing by GiftsController#show as JS

When I view the javascript console in my browser, I see a JS error :

[Error] TypeError: '[object Object]' is not a function (evaluating 'f[c](d)')
(anonymous function) (bootstrap.min.js, line 7)
each (jquery.js, line 657)
each (jquery.js, line 266)
modal (bootstrap.min.js, line 7)
ready (application.js, line 23)
fire (jquery.js, line 3049)
fireWith (jquery.js, line 3161)
ready (jquery.js, line 434)
completed (jquery.js, line 105)

Any help would be greatly appreciated.

It maybe because of turbolinks add your modal to document ready http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links — Sam, Dec 18 '13 at 16:02
The request is looking for a JS response. Add `'data-type' => "html"` to your link. — spas, Dec 18 '13 at 16:08
@SamD I made the recommended changes to the JS file to handle turbo links. Nothing changed. — Questifer, Dec 18 '13 at 16:25
@spas I made that change and now the page darkens as it should for a modal to popup but the modal never shows. It seems like this is a step in the right direction though. — Questifer, Dec 18 '13 at 16:26
that means your modal loads but it has no content in it. Try adding something inside it. http://getbootstrap.com/javascript/#modals-examples — Sam, Dec 18 '13 at 17:07
@SamD when I view source, I see the partial's content loading into the body of the modal. However, I now see a JS console error (added to original question). It relates to Bootstrap.min.. — Questifer, Dec 18 '13 at 17:28
change gifts.js.coffee to gifts.js I think your syntax is for js not coffeescript or there's a problem in converting to js. Try plain js and see what happens — Sam, Dec 18 '13 at 17:31
@SamD I did that and made several other changes and it is working now. Thank you for your help! — Questifer, Dec 19 '13 at 22:02
Could you please explain in an answer what you did to make it work? And then accept that - or the answer that made you think of your solution? I am looking for a solution for a BS modal + Rails 4 problem, too. Maybe you have found my solution. :) Thanks! — AOphagen, Mar 20 '15 at 17:34
@AOphagen My mistake. I just accepted the answer I posted a while back. Hopefully that helps :) — Questifer, Mar 20 '15 at 17:38

score 0 · Accepted Answer · answered Dec 19 '13 at 23:49

Based on several comments and some of my own changes I have the modal working. I removed the bootstrap-modal-rails gem, and imported the modal from the existing bootstrap sass gem.

Gemfile

group :assets do
    gem 'sass-rails', '4.0.1'
    gem 'bootstrap-sass', '3.0.2.0'
end

application.js

//= require jquery
//= require turbolinks
//= require bootstrap
//= require bootstrap/modal
//= require_tree .

It was recommended I change my gifts.js.coffee to gifts.js gifts.js

jQuery(document).ready(function($){
  $('#myModal').modal('options')
  var body = $( 'show' );
});

index.html.erb

<p><%= link_to 'Buy', gift_path(gift), {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#myModal', :class => "btn btn-primary ", 'data-type' => "html" } %></p>
                </div>
                <!-- Modal -->
                    <div class="modal fade" id="myModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <%= render partial: 'show', :locals => { :gift => gift } %>
                            </div>
                        </div>
                    </div>
                <!-- End of Modal -->

gifts_controller.rb

def show
        @gift = Gift.find(params[:id])
        respond_to do |format|
          format.html {render :show}
          format.json { head :ok}
        end
end

Thanks for the help everyone.

score -1 · Answer 2 · answered Dec 18 '13 at 17:58

-1

$ ->
  $('#myModal').modal('options')

$ -> ensures that code will run when the page DOM is ready.

answered Dec 18 '13 at 17:58

NARKOZ

27,203
7
68
90

Bootstrap 3 Modal with Rails 4 not showing

2 Answers2