1

My modal does not appear and there is only a black overlay

I am using 

Rails version             6.0.1
Ruby version              ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin18]
RubyGems version          3.0.6
Rack version              2.0.7
JavaScript Runtime        Node.js (V8)

My code is largely similar to this: https://dzone.com/articles/rails-creating-modals

index.html.erb

<%= link_to 'Add user', new_item_path,  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#modal-window', class: 'btn btn-primary btn-lg'}  %>
<div id="modal-window" class="modal fade hide" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

_new.html.erb


<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">x</button>
  <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
  <%= simple_form_for @item do |f| %>            
    <%= f.input :title, label: "Todo", required: true, id: "font-colour" %>
    <%= f.input :description %>
    <%= f.input :category %>
    <%= f.input :expiryDate, label: "Expiry Date", as: :date %>
    <%= f.button :submit, 'submit' %>
  <% end %>
</div>
<div class="modal-footer">
  <button class="btn btn-primary">Save</button>
</div>

new.js.erb

$("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
$("#modal-window").modal("show");

in the controller:

  def new
    @item = Item.new
    respond_to do |format|
      format.html
      format.js
    end
  end

I tried removing hide from the class="modal fade hide" and also changing .modal("show") to .show()

I have looked at other similar posts:

Bootstrap modal in ruby on rails not working(not show up)

Bootstrap modal in ruby on rails not working

Bootstrap Modal Not Appearing

Apollo
  • 63
  • 6
  • If you need to use javascript to activate bootstrap modal, do not use data attribute. – Tun Dec 27 '19 at 03:53
  • sorry, I am new to ruby on rails. Are you referring to this 'data-toggle' => "modal", 'data-target' => '#modal-window'? – Apollo Dec 27 '19 at 04:12
  • yes. read [bootstrap 4 modal](https://getbootstrap.com/docs/4.0/components/modal/) documentation also. – Tun Dec 27 '19 at 04:18
  • I see from the documentation that data attributes are not required but in this case, how do I solve this problem. Because I tried removing them but now even the overlay does not appear – Apollo Dec 27 '19 at 07:03

0 Answers0