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
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
I have a form in my view, and upon submission, my controller validates the fields and returns a list of errors in #errors, if any.
Now, I want to display these errors in a modal.
Here's what I have in my View:
!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%= render 'shared/errors' %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to display this modal on page load, if and only if #errors exists.
It looks like coffeescripts don't have access to variables passed by the controller.
I came across a few similar questions, but none of them seem to solve my problem.
you can do this with the help of gon gem.
Add "gem 'gon'" to your Gemfile.
run bundle install.
set value in controller like this: gon.form_errors = true if #errors.present?
Add this line in application layout in head section before all javascript include tags:- For rails 4: <%= Gon::Base.render_data %> and for rails 3 <%= include_gon %>
Now you can access this variable in your coffee file like this: gon.variable_name and use it like this:
if gon.form_errors
$('#your-modal-id').modal('show')
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 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()
I am using twitter bootstrap 3 for my project but cannot seem to get the modals to work correctly when loading remote content.
My "application" layout is the following:
<!DOCTYPE html>
<html>
<head>
<title>TestBootstrap</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
I have two views, one is index and the other is show
index contains the following information:
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/modal/show">
<div class="modal-dialog">
<div class="modal-content">
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Show contains the following:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Find me in app/views/modal/show.html.erb</p>
</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>
For some odd reason I get the modal displayed without a background when adding the "remote-data" attribute.
I have tried removing "turbo_links" but it has been futile. This only seem to happen in rails though, as I have tried a similar example in jsfiddle and it works fine!
Please see http://jsfiddle.net/6X2zb/
Please help and thanks in advance !
I hit this wall just yesterday. I wound up using bootstrap-modal instead, which provides a patch for bootstrap 3.
https://github.com/jschr/bootstrap-modal
Bootstrap 3 specific examples:
http://jschr.github.io/bootstrap-modal/bs3.html
Here's the rails example
https://github.com/jschr/bootstrap-modal/wiki/Ruby-on-Rails----AJAX-Modal-Example
I was finally able to figure out what the issue was from Bootstrap 3 with remote Modal
Turns out I was missing the surrounding
<div class="modal-dialog">
<div class="modal-content">
... contents ...
</div>
</div>