I am struggling getting a simple modal dialog to display in my rails app. Here are the relevant files...
Gemfile
group :assets do
...
gem 'bootstrap-sass-rails'
...
end
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require "bootstrap"
//= require "bootstrap/modal"
//= require_tree .
app/assets/stylesheets/application.css
#import "bootstrap";
#import "bootstrap/modal";
app/views/tasks/index.html.erb
<%= link_to 'Modal', new_task_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>
app/views/tasks/_new.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>
app/views/tasks/new.js.erb
$("#modal-window").html("<%= escape_javascript(render 'new') %>");
So this is just a simple app with a single model that I am trying to get my feet wet with. Right now the link will respond. The page fades, but I am not getting any content.
I've spent the last week messing around off and on trying to get this working wihtout much luck. Thanks in advance for any help.
You need to call modal() on $("#modal-window"). Update app/view/tasks/new.js.erb as:
$("#modal-window").html("<%= escape_javascript(render 'new') %>").modal()
Related
(I know there's a bunch of questions like this, but none seem to answer my specific situation.)
I'm trying to get a bootstrap modal to display in a Rails view, but the associated button simply does nothing - clicking it has no effect at all beyond the button interaction effect. As far as I know bootstrap in general is set up to work properly; that doesn't seem to be my issue.
Modal html, most of which is directly copied from the bootstrap documentation:
<div id="new_event">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#new-event-modal">+</button>
<div id="new-event-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">add an event!</h4>
</div>
<div class="modal-body">
Text! <!--form goes here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
</div>
My custom.scss has #import "bootstrap-sprockets"; #import "bootstrap", and my application.js has //= require bootstrap-sprockets. Other javascript things are working perfectly well, and other bootstrap things are working perfectly well. What am I missing here?
That is not going to work. If you are using Rails 6, there is a very specific way to add Bootstrap to your rails app. I have described it on github:
https://github.com/overdrivemachines/bootstrap-rails
Issue 1: My navbar toggle menu will not close, but will open, unless I remove either of the following from my layout:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Now, when i remove this the toggle works and will open and close. Although, my sign-in modal will not function without it.
or:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Issue 2:
I have accordions that will not work on first load - but will then work once the page has been reloaded.
My navbar in summary:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav navbar-right">
#more nav items code here
<li class="nav-item-2 nav-display-2">
<button type="button" class="btn ripple-effect btn-info btn-lg" id="myBtnSignIn2">Sign Up/Login</button>
<div class="modal fade" id="SignInModal2" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<%= render "devise/shared/links" %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</nav>
<script>
$(document).ready(function(){
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
</script>
accordion code:
<a class="collapsed card-link text-center" id="edit-accordion" data-toggle="collapse" href="#collapseFIRST">
</a>
<div id="collapseFIRST" class="collapse" data-parent="#accordion">
<div class="card-body">
</div>
</div>
application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require Chart.bundle
//= require chartkick
Is there any you see standing out in my code wrong?
You can try this in your script. It is explained here
$( document ).on('turbolinks:load', function() {
$("#myBtnSignIn").click(function(){
$("#SignInModal").modal();
});
});
Add the bootstrap gem to your Gemfile and remove the html tag from the layout
Gemifle
gem 'bootstrap', '~> 4.3.1'
You should not have 2 versions of jQuery.
Then run bundle install
Then change this to:
/= require rails-ujs
//= require activestorage
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require_tree .
Also in hour applications.scss you should have
#import "bootstrap";
Also in layout try instead:
<%= javascript_include_tag 'application', 'data-turbolinks-track': true %>
Modal content displays fine when triggered by a clicking button via Ajax. However, instead of the modal popping up and making the entire page behind it grey and inactive the modal content appears within the HTML content and pushes the other contents down. I had run a similar modal on a different framework (Shiny) other than rails and it worked fine. I came across a similar question: Twitter Bootstrap modal pushes html content to the left. The working solution was do this in CSS: html{overflow:hidden;height:100%;} and
body{overflow:auto;
height:100%;}
which I tried but did not work. Other similar posts conclude that issues are due to bugs in Bootstrap and suggest to modify bootstraps source code but I suppose they were fixed since the posts date like more than 2 years ago.
My code:
/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require_tree .
app/views/indicators/index.html.erb
<%= link_to 'Add release', new_release_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>
/app/controllers/indicators_controller.rb
def new_release
respond_to do |format|
format.html
format.js
end
end
app/views/indicators/new_release.js.erb
$("#modal-window").html("<%= escape_javascript(render 'indicators/indicator_modal') %>");
$("#modal-window").modal('show');
/app/views/indicators/_indicator_modal.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>
Could it be a Rails specific issue? How can I make the modal pop-up?
It looks like you're missing some markup that the modal requires (see the Bootstrap docs)
You have:
<div class="modal hide fade" ... >
<div class="modal-header" ... >
<div class="modal-body" ... >
<div class="modal-footer" ... >
But you need:
<div class="modal hide fade" ... >
<div class="modal-dialog" ... >
<div class="modal-content" ... >
<div class="modal-header" ... >
<div class="modal-body" ... >
<div class="modal-footer" ... >
If your using bootstrap gem try to add following line to /app/assets/javascripts/application.js
here are the https://github.com/twbs/bootstrap-sass
//= require bootstrap-sprockets
or else if manually using boostrap by using source code try to add below file to javascript directory in your application
bootstrap/js/modal.js
I made a simple large modal window in my rails project.
Here is the code:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> title</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The code is copypasted from here: w3cschools
I also tried it to work in jsfiddle it works well.
But on my website this modal doesn't get css
from modal-lg.
I also issued some wired problems with bootstrap responsive grids earlier and decided to use pure.css grid cause I didn't have enough time to dig deeper. So it feels right now like I have some problems with including bootstrap.
This is part of my gem file where I include bootstrap:
gem 'rails', '4.0.2'
gem 'bootstrap-sass'
gem 'sprockets', '2.11.0'
gem 'bcrypt-ruby', '3.1.2'
gem "font-awesome-rails"
So how do I fix this? ( I can make a simple demo page and push it to heroku to show you that modal doesn't work properly, if it will help
Upd: so okay, you can see the example here: link. Check it in web inspector. And check w3c modal window in web inspector to see that on my website it doesn't really get css for modal-lg
I am having some difficulties getting the Kaminari gem to work with my Bootstrap modal. I know that it needs to work primarily with Ajax, but I'm not quite sure what to do on this one.
Specifically, I have over 800 images that are supposed to load in the Modal. But, right now, all those images are loading at once, causing a long loading time.
Here's what I currently have:
new.html.erb
# basic html items
<%= render "image_modal" %>
_image_modal.html.erb
<div class="modal fade" id="choosePicture" 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">×</button>
<h4 class="modal-title">Choose Your Image</h4>
</div>
<div class="modal-body">
<div class="row">
<% #images_by_filename.each do |image| %>
<div class=" col-xs-3">
<div class="thumbnail">
<%= image_tag image.picture(:square), :title => image.name, :id => image.id, :image_url => image.picture(:thumb), :class => "list_thumb image-select style_image" %>
</div>
</div>
<% end %>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div><!-- /.modal-content -->
images_controller.rb
class ImagesController < ApplicationController
def new
#template = Template.new
#groups = Group.all
#images = #images_by_filename
#template.template_assignments.build
end
end
How could I incorporate Kaminari to work within this modal, separately? When I try to implement the pagination, it ends up refreshing the entire page, as opposed to just within the modal.
Any help on this would be great!
Some code is missing in controller and view files.
images_controller.rb
#images = #images_by_filename.page(params[:page]).per(number_of_records_per_page)
_image_modal.html.erb
= paginate #images
You can refer http://railscasts.com/episodes/254-pagination-with-kaminari for more help.
Hope this will help you.