I have the following weird problem in my rails app. I am using bootstrap modal to edit student information in my student model.
<td><%= link_to t('edit'), edit_student_path(student),
{remote: true, 'data-toggle' => "modal",
'data-target' => '#modal-window'} %>
</td>
div class="modal fade modal8" id="modal-window" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The modal works as written above but does not work if I change the data-target and id of the modal from 'modal-window' to anything else. What is going on?
data-target in anchor should be css selector and in modal div you should have that selector.
you are changing either one of them so it is not working,
Related
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')
There are two modals being used in the Rails app.
One modal is used for editing (#editModal)
The other one is for displaying text (#textModal)
link_to for both the modals are:
<%= link_to edit_user_path(user), {:remote => true, 'data-toggle' => "modal", 'data-target' => '#editModal', 'data-backdrop' => 'static', :class => "icon-edit" } do %>
Edit
<% end %>
<%= link_to display_path(data), {:remote => true, 'data-toggle' => "modal", 'data-target' => '#textModal', 'data-backdrop' => 'static', :class => "icon-edit" } do %>
Display
<% end %>
_editModal.html.erb
<div id="editModal" class="modal fade edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<%= render 'shared/ajax_load' %>
</div>
</div>
</div>
</div>
_textModal.html.erb
<div id="textModal" class="modal fade edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body msg-body">
<%= render 'shared/ajax_load' %>
</div>
</div>
</div>
</div>
The problem is when any of the link is clicked one modal is displayed, but the content is loaded into both the modals.
Am I doing anything wrong or that's how it works??
Well... Yes and Yes.
You are doing something wrong... and that's how it works. :)
The only difference I can see in your two modals is the id. Every other thing is the same... even up to the partial being rendered: <%= render 'shared/ajax_load' %>
What this means is that whenever you click any of the buttons, the partial 'shared/ajax_load' gets populated and will remain populated until you refresh the page.
Fix:
Two things I can readily suggest here:
1) You can decide to have separate partials rendered for the two modals
2) You can decide to use JS to populate the modal(If you want to use the single partial): then you will have the control to clear off the content of the partial before populating it and rendering into the respective modals
Hope I've been able to explain and hope you understand this.
I am some how not able to invoke this modal...nothing happens when I click the button
user/show.html.erb has the following snippet
<div class="row padding5">
<div class="col-xs-12 text-center">
<%= link_to "CONTACT USER", new_contact_mail_delivery_path(listing_id: listing.id), {:remote => true,, 'data-toggle' => "modal", 'data-target' => '#Mymodal' :class => "btn btn-primary"} %>
</div>
</div>
and in my contact_mail_deliveries/new.html.erb
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
modal code...
</div>
please help with how to proceed over this, I am a newbie to coding.
Thanks
Your code seems fine. Check that you have added the javascript file for bootstrap too -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
add these at the end of your html code.
Check out the demo at http://divyavrat.github.io/modal/
When I click on the View in Modal, it keeps on displaying only the first record. Even if I click on the second record it still displays the first one. Below is how I implemented the link_to toggle to modal box called myModal.
<%= link_to 'View in Modal', "#", data: {toggle: "modal", target: "#myModal"} %>
<div class="modal fade" id="myModal" 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" id="myModalLabel">Test</h4>
</div>
<div class="modal-body">
<span class="note"><%= raw(usernote.note) %></span>
</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>
</div>
</div>
</div>
The problem
I supposed you've done something like:
<% #usernotes.each do |usernote| %>
<%= link_to ... %>
// code of modal associated to the usernote
<% end %>
The problem is that you used the same html ID for all the modals (#myModal).Besides the fact ID duplication is not W3C conform, this is the cause of the issue.
When you will click on one of the links, it will open the first modal with the #myModal ID (which is the modal of the first record).
So, how to patch the issue?
Easy way: one modal per usernote
One way, the easy way, is to use different IDs for all the modals. For example:
<%= link_to ... data: {toggle: "modal", target: "#modalForUserNote#{ usernote.id }"} %>
<div id="modalForUserNote<%= usernote.id %>" ...>
// ....
But this way is not the best one: you just create one modal per usernote... If you have 1000 usernotes, you will generate 1000 modals in your html... This is obviously pretty bad...
An other way: javascript callback
An other way to do it will be to create only one modal and to edit its content with some Javascript code.
An example of code can be:
html code
// the modal code
<% #usernotes.each do |usernote| %>
<% link_to ..., data: {toggle: "modal", target: "#modal"}, 'data-usernoteid' => ..., 'data-usernotedata' => ... %>
<% end %>
javacript code (using jQuery)
$('.modalLink').on('click', function() {
$('#modal #idOfTheUserNote').html($(this).data('usernoteid'));
// ...
});
You can note the usage of data attributes.
Data attributes can be replaced by an AJAX request to your Rails application which will returns JSON data.
An other way: AJAX request
The last way to do it is to request your Rails application with an Ajax call. Your application will render an Javascript view (the code will be sent to your browser and evaluated).
This can be simply done by using the remote: true option in your link_to (rails will handle the ajax request by itself.
The following code can do the trick:
html code
// the modal code
<% #usernotes.each do |usernote| %>
<% link_to 'text', some_action(usernote), data: {toggle: "modal", target: "#modal"}, remote: true %>
<% end %>
controller code
def some_action
#usernote = Usernote.find_by_id(param[:id])
end
view to render: for example usernote/some_action.js.erb
$("#modal #modalIdOfTheUsernote").html("<%= #usernoed.id %>");
What is the best way to do it?
Obviously not the first one.
Choosing between the two others just depends on what you want to do:
For real time updates, AJAX request may be better. But you can get some latency because you need to wait the server response.
Otherwise, data attributes are good enough.
3 options here:
generate one modal for each record - the worst thing you can do
use data attributes to update content of the modal
use ajax action where you'll update the content of the modal and open the modal with $('#myModal').modal('show') http://getbootstrap.com/javascript/#modals-usage
1. generate one modal for each record
<% #usernotes.each do |usernote| %>
<%= link_to 'View in Modal', "#", data: {toggle: "modal", target: "#myModal_<%= usernote.id %>"} %>
<div class="modal fade" id="myModal_<%= usernote.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
....
<span class="note"><%= raw(usernote.note) %></span>
....
</div>
<% end %>
2. use data attributes to update content of the modal
<% #usernotes.each do |usernote| %>
<%= link_to 'View in Modal', "#", data: {usernote: usernote.note}, class: 'user_note_modal' %>
<% end %>
$('.user_note_modal').on('click', function() {
$('#myModal span.note').html($(this).data('usernote'));
$('#myModal').modal('show');
});
p.s. why use .modal('show')? just so you make sure to update the content of the modal first then display it.
3. use ajax action - assuming your resource name is UserNote and you have user_notes_controller with show action:
<% #usernotes.each do |usernote| %>
<%= link_to 'View in Modal', usernote_path(usernote), data: {toggle: "modal", target: "#myModal"}, remote: true %>
<% end %>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<span class="note"></span>
</div>
</div>
clicking on one link will trigger an ajax event that will expect a show.js.erb template, where you'll update the content of the modal and then display it:
app/views/user_notes/show.js.erb
$('.modal-body span.note').html('<%= j(render #usernote.note) %>');
$('#myModal_').modal('show');
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.