I am using Rails 3.2 and the twitter-bootsrap-rails gem (link).
I have a modal, this is the html.erb:
<div id="myModal" class="modal hide fade in" style="display: block;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><%= t '.add_category_title' %></h3>
</div>
<div class="modal-body">
<%= render :partial => 'wgform' %>
</div>
</div>
this modal should be hidden when the page loads, and triggered with a button:
<a class="btn" href="#myModal" data-toggle="modal"><%= t '.add_category_btn' %></a>
but for some reason, the modal appear when the page loads, with css attribute "display:block;" (it should be "display:none;").
The "X" on the top right works right to dismiss it, and the button correctly shows the modal (if clicked after closing it).
The strange thing is that all was working one hour ago, and I didn't modified that file.
I'm stuck, don't know where to look.
<div id="myModal" class="modal hide fade in" style="display: block;">
why do you have style="display: block;" there? remove it
Solved editing bootstrap.js.coffee (see the comments above).
bootstrap.js.coffee:
$ ->
$("body > .topbar").scrollSpy()
$ ->
$(".tabs").tabs()
$ ->
$("a[rel=twipsy]").twipsy live: true
$ ->
$("a[rel=popover]").popover offset: 10
$ ->
$(".topbar-wrapper").dropdown()
$ ->
$(".alert-message").alert()
$ ->
domModal = $(".modal").modal(
backdrop: true
closeOnEscape: true
)
$(".open-modal").click ->
domModal.toggle()
Related
I have a controller in my Rails application which calls a js partial when a certain condition is met:
my_controller
if false == validation_result
render :partial => 'my/show_modal.js.erb'
end
_show_modal.js.erb
$("#modal_content").html("<%= escape_javascript(render 'my/show_modal') %>");
$("#notify").modal('show');
The html.erb called from above code renders a modal as shown below:
_show_modal.html.erb
<div class="modal fade" tabindex="-1" id="notify" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width:1000px;margin-left:-285px !important;">
<div class="modal-body">
<h3 class="modal-title">Please review</h3>
<span style="float: right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</span>
</div>
</div>
</div>
</div>
The modal renders fine; but when I click on Ok button on the modal, the modal dismisses fine as well but leaves behind a light gray scheme on the entire webpage (the webpage seems to loose focus and I have to refresh the page to be able to use it again)!
What am I doing wrong here? How do I dismiss the modal completely so that the webpage could be used again?
UPDATE:
I tried almost all the approaches suggested in how to destroy bootstrap modal window completely? but NONE of them work for me.
I even posted comments on a few approaches listed on the above page stating the backdrop still does not go away for me.
Maybe this is a very ancient-minded-approach but it supposed to work. Assign hideModal() function on click event and see the result.
function hideModal() {
$("#notify").css("display", "none"); // Removing modal container
$(".modal-backdrop").css("display", "none"); // Removing semi-transparent black background
$(".modal-open").css("overflow-y", "auto"); // Enabling vertical scrolling back
}
So..I’m trying to understand usage of modals in Rails and looking for a few pointers.
I have a list of items at at category/1 which are being displayed in a loop. I have a modal which I’m rendering at the bottom of the page with <%= render "category/update_item_modal" %>
There’s already a form setup for updating params of each item, but I’m trying to get a modal pop up to specifically just update the title. The modal popup works, and so far I have the following for the button which opens the modal:-
<button class="btn btn-primary btn-sm">Edit Title</button>
And the modal itself:-
<div class="modal fade" id="updateItemModal-<%= item.id %>" tabindex="-1" role="dialog" aria-labelledby="updateItemModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateItemModalLabel">Change Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- UPDATE TITLE HERE? -->
</div>
</div>
</div>
</div>
This gives me the error of undefined local variable "id" from the modal id for obvious reasons, and this is where my understanding hits a wall. How do I pass the data from a loop iteration into my modal?
End goal is to have an editable textarea field with the existing title in it, and a submit button which will post the edit.
Provided you have defined #item in your controller:
<%= render "category/update_item_modal", locals: item: #item %>
Then you have access to item in your partial. One more thing you can do to avoid that error is to use the safe operation operator item&.id. More on the safe navigation operator here: https://bugs.ruby-lang.org/issues/11537
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 am having a modal that have two divs in it. Now i am willing to open the same modal with two different links.
Here is my modal:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<%= link_to "Back","#",class: "btn btn-default",id: "Back-Link",style: "display:none"%>
<%= link_to "Next","#",class: "btn btn-default",id: "Next-Link"%>
<div id="One">
<p>Some text in the modal.</p>
</div>
<div id="Two" style="display:none">
<p>Modal Two.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Following are the links:
<%= link_to "Test","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
<%= link_to "Test1","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
When I click on "Test" Link the modal should open with div id "One". And when i click on "Test1" the modal should open with div id "Two".
can anyone help me? Thank you in advance
Here is a working fiddle.
I made use of the data attributes to store id of div to show inside the modal. Then on click of it, I changed its style from display:none to block.
<div class="modal-body">
<div id="one" class="hide_first">
<p>Some text in the modal.</p>
</div>
<div id="two" class="hide_first">
<p>Modal Two.</p>
</div>
</div>
Open #One
Open #Two
<!-- Storing the id of divs in data-modal-show -->
And write some javascript like this
//classes given to our links
$(".modal-open-links").on("click", function(e){
//First set display:none for all divs
$(".hide_first").css("display", "none");
//hide_first class is on both our divs inside modal body that we want to alternatively show
content_to_show = $(this).attr("data-modal-show");
//the div id we want to show on modal open
//Show the one we clicked
$("#" + content_to_show).css("display", "block");
});
I have a Rails view with two icons. Each icon should open a different modal (using a partial).
The issue is that both icons are opening the same modal (the first one).
Here is the code to display the modals:
<a data-toggle="modal" href="#workorder-<%= workorder.id %>">
<i class="icon-list"></i><%= workorder.wologs.count %>
<%= render :partial => "wologs/history", locals: {workorder: workorder} %>
</a>
<a data-toggle="modal" href="#workorder-<%= workorder.id %>">
<i class="icon-ok-sign"></i><%= workorder.tasks.count %></a>
<%= render :partial => "tasks/taskslist", locals: {workorder: workorder} %>
</a>
Thanks for the help!
As MrYoshiji already mentioned the reason is two links point to same id, so same modal launched.
I would like to add that it's also incorrect to put the modal body inside link, if the partial is modal body.
According to Bootstrap example:
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
The link and modal are two totally different divs.
So the fix is:
Launch partial in different div and assign different ids to them.