CODEWITHSUNDEEP
ruby-on-rails
D T
D T

Reputation: 3746

Why bootstrap modal can't display on Rails 5?

1.code of index.html.erb:

<%= link_to 'Add release', new_release_articles_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window'}  %>
<div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<p>Hoc javascript</p>
  1. code of controller:
 def new_release
      respond_to do |format|
        format.html
        format.js
      end
    end
  1. code of new_release.js.erb
$('#modal-window').html("<%= j render 'blorgh/articles/new_release'%>");
$('#modal-window').modal();
  1. code of new_release.html.erb
<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h3 id="myModalLabel">Modal header</h3>
 </div>
 <div class="modal-body">
   **here comes whatever you want to show!**
 </div>
 <div class="modal-footer">
   <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
   <button class="btn btn-primary">Save changes</button>
 </div>
  1. application.js
//= require rails-ujs
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
  1. Result click link add release: enter image description here

Upvotes: 0

Views: 116

Answers (1)

fool-dev
fool-dev

Reputation: 7777

Look at this

//= require rails-ujs
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

You don't need rails-ujs if you use jquery_ujs so you can remove this //= require rails-ujs from here and follow the order

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

you can consider one rails-ujs or jquery_ujs, after changing this restart the server

Update from comment

Use tabindex="-1" to div modal window

Upvotes: 2

Related Questions