Bootstrap Modal in Ruby on Rails Not Working

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

I guess when you try to render that modal via javascript inside new_release.js.erb with

$("#myModal").find(".modal-content")

actually it's not loaded in DOM as the partial is not loaded

So instead of adding whole modal inside you partial keep model div tag inside the template file where you actually calling like lets say your main template is

index.html.erb

<%= link_to 'Add release', new_release_path, :remote => true %>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

inside js.erb

new_release.js.erb

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

_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">
    <p>One fine body…</p>
  </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>

Hope This works, Thanks

Bootstrap modal in ruby on rails not working

You need to remove the hide class from the #myModal modal, because that's given it a display: none !important CSS rule, that's why you can't see it:

Check with this:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <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">
        <p>One fine body…</p>
      </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>
    </div>
  </div>
</div>

And most probably you'll need to wrap your .modal-header within a <div class="modal-dialog" role="document"> and a <div class="modal-content"> to see your it "well".

Bootstrap hide modal not working in Rails 6 using ajax

This might be a total hack but I was able to resolve this issue by setting jquery to the global object explicitly in application.js.

import jquery from 'jquery';
window.$ = window.jquery = jquery;

application.js:

require("@rails/ujs").start();
require("@rails/activestorage").start();
require("channels");
import jquery from 'jquery';
window.$ = window.jquery = jquery;

import "bootstrap";
import "../stylesheets/application";

environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'] 
  })
)

module.exports = environment

Rails Bootstrap Modal not appearing

There seems to be no issue regarding your code. For the sake of clarity, i will be explaining all the step regarding modal implementation.

steps
1. include bootstrap.js in your JavaScript, and kindly check there is only bootstrap.js or bootstrap.min; both of them should not present.

2.Modal calling step should be

<button type="button" class="btn btn-primary success" data-toggle="modal" data-target="#myModal">Login
 </button>

3.On calling the modal, the codes are

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Please Login</h4>
      </div>
      <div class="modal-body">
        <div class="col-xs-8">
          <input type="text" class="form-control" placeholder="user name">
          <input type="password" class="form-control" placeholder="password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default"data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary info">Login</button>
      </div>
    </div>
  </div>
</div>

Rails 6 Bootstrap Modal Won't Appear

Ben Trewern was right! I removed all my front-end gems from the Gemfile and added it to yarn and fixed the issue. Thanks.

Bootstrap modal not appearing to edit table element Ruby on rails

      <div class="modal fade show" id='<%= "myModal_#{patient.id}" %>' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        .
        .
        .
        .
        .
      </div><!-- /.modal -->

add a class show along with modal and fade. if that doesnt seems to work add class in insted

---

Related Topics