I'm trying to get bootstrap-modal.js to work in Rails but can't figure it out. At this point, I'm just trying to get the event to fire when I click the button as in this fiddle
http://jsfiddle.net/mjmitche/xt4aQ/16/
using the exact same code in Rails nothing's happening when I click.
I have this html set up in a view
<h3>Demo</h3>
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Primary
Secondary
</div>
</div>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
And bootstrap-modal.js copied into the javascripts folder in the assets pipeline
In Rails,
But nothing's happening when I click launch in my rails application
= javascript_include_tag "application"
wasn't in the application layout so bootstrap-modal.js also wasn't included. problem now solved.
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 am trying to implement bootstrap to my ruby application but failing to understand why the image is not displaying.
I am trying to implement this bootstrap. https://blackrockdigital.github.io/startbootstrap-clean-blog/.
The image is stored in Assets/Images
index.html.erb:
<!-- Page Header -->
<header class="masthead" <img class="img-responsive img-full" src="../assets/home-bg.jpg" alt="">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Start Bootstrap</h1>
<span class="subheading">Technology made simple in a blink of an eye!</span>
</div>
</div>
</div>
</div>
Current layout of page
If it is in the app/assets/images/ folder then just use the image tag.
<%= image_tag 'home-bg.jpg' %>
If you do not want to do that for some reason, then just inspect that page to see where it is looking for the image and adjust the path accordingly.
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've got the following HTML in an MVC 5 / Bootstrap app. As you can see, I am attempting to display a photo in the modal dialog. This works fine. But, if the photo is wider than the dialog, it extends beyond the bounds of the dialog. Is there a way I can have the dialog expand, to a certain point, then display scroll bars, based on the size of the contents (image)?
<div class="modal fade" id="viewPhotoDialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Ask the Experts</h4>
</div>
<div class="modal-body">
<img src="#Url.Action("GetPhoto", new { askTheExpertId = #Model.AskTheExpertId })" alt="" title=""/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can add .img-responsive class to the img (gives max-width:100% and auto height).
About modal width, there are 2 extra option classes modal-lg and modal-sm that you can add at .modal-dialog
http://getbootstrap.com/javascript/#modals
I'm using bootstrap upgrade service for upgrading from Bootstrap 2.x to 3.x
http://upgrade-bootstrap.bootply.com/
But I have a problem converting the razor syntax. For example I have:
<div class="row-fluid">
<div class="span12 form-actions">
<p>
<a class="btn" href="#Url.Action("ChooseAddItem", "Home")">Action</a>
</p>
</div>
</div>
And service returns:
<div class="row">
<div class="col-md-12 form-actions">
<p>
<a class="btn btn-default" href="#Url.Action("
chooseadditem="ChooseAddItem" home="Home">Action</a>
</p>
</div>
</div>
Look what happens to Url.Action function. This is only small example. I have a lot of files and a lot of code.
Is there any other way of converting razor views to bootstrap 3.x?
I'm the author of http://upgrade-bootstrap.bootply.com/
The problem you're seeing is because the service uses jQuery to manipulate the DOM and structure of your HTML. A headless browser is being used, and this changes the actual HTML content upon conversion.
I've added a new switch ("Modify nav and modal structure") to prevent this from happening, but as a result the structure of any modals and navs will not be converted to Bootstrap 3.
So, if you want to keep the Razor content the same, just uncheck the "Modify nav and modal structure" checkbox before you "Convert to Bootstrap 3" and it should work for you.