Bootstrap modal doesn't appear in Rails 4
I followed the example to write a rails app with a modal popup.
This is the code I have (quite a few lines)
index.html.erb
<h1>Listing people</h1>
<%= link_to 'Add Person Modal', new_test_path,
{:remote => true, 'data-toggle' => "modal", 'data-target' => '#modal-window'} %>
<div id="modal-window" class="modal hide fade in" role="dialog"
aria-hidden="true" style="display: none; "></div>
_new_test.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>
people_controller.rb
def new_test
respond_to do |format|
format.html
format.js
end
end
new_test.js.erb
// $("modal-window").modal();
$("#modal-window").html("<%= escape_javascript(render 'people/new_test') %>");
Any help is appreciated !!
source to share
Alternatively , if you need the ability to have different content in the modal, I would suggest using Bootbox.js ; it generates modal markup on the fly and can be used as an alternative to browser default / prompt / warning dialogs. The advantage of using generated markup is that you don't have to deal with resetting a template that a modal usually requires.
Here's a sample from a recent project of mine:
HTML:
<a href="#" data-modal-href="remote.html" class="show-modal">Click me</a>
JQuery
$(document).on('click', 'a.show-modal', function (e) {
e.preventDefault();
var url = $(this).data('modal-href');
$.get(url)
.fail(function () {
bootbox
.alert("<b>We're sorry.</b> The modal could not be loaded. Please wait a moment and then try again.", function () {
})
.find('div.modal-dialog')
.addClass('modal-sm');
})
.done(function (response, status, jqxhr) {
bootbox.dialog({
show: true,
title: 'Your Modal Title',
message: response,
buttons: {
cancel: {
label: 'Cancel',
className: 'btn'
},
save: {
label: 'Save',
className: 'btn btn-primary',
callback: function() { /* your 'save' callback */ }
}
}
});
});
});
message
is an option used to fill in a portion of the .modal-body
generated modal. This is a naive implementation, though, since it doesn't include any checks to prove that you are not getting, say, a complete HTML page in response
.
I also usually turn on the loading animation before executing the function $.get
, but this is something I think you can figure out on your own.
source to share