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.
Related
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/
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,
I am having some difficulties getting the Kaminari gem to work with my Bootstrap modal. I know that it needs to work primarily with Ajax, but I'm not quite sure what to do on this one.
Specifically, I have over 800 images that are supposed to load in the Modal. But, right now, all those images are loading at once, causing a long loading time.
Here's what I currently have:
new.html.erb
# basic html items
<%= render "image_modal" %>
_image_modal.html.erb
<div class="modal fade" id="choosePicture" 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">Choose Your Image</h4>
</div>
<div class="modal-body">
<div class="row">
<% #images_by_filename.each do |image| %>
<div class=" col-xs-3">
<div class="thumbnail">
<%= image_tag image.picture(:square), :title => image.name, :id => image.id, :image_url => image.picture(:thumb), :class => "list_thumb image-select style_image" %>
</div>
</div>
<% end %>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div><!-- /.modal-content -->
images_controller.rb
class ImagesController < ApplicationController
def new
#template = Template.new
#groups = Group.all
#images = #images_by_filename
#template.template_assignments.build
end
end
How could I incorporate Kaminari to work within this modal, separately? When I try to implement the pagination, it ends up refreshing the entire page, as opposed to just within the modal.
Any help on this would be great!
Some code is missing in controller and view files.
images_controller.rb
#images = #images_by_filename.page(params[:page]).per(number_of_records_per_page)
_image_modal.html.erb
= paginate #images
You can refer http://railscasts.com/episodes/254-pagination-with-kaminari for more help.
Hope this will help you.
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 Project that have many Pictures. I am using the first picture as a link to call a twitter bootstrap modal, where some information will be displayed as well as the link for the project`s page.
<!-- Modal -->
<div id="<%= project.id %>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3><%= project.title %> <small><%= project.sub_title %></small></h3>
</div>
<div class="modal-body">
<p><%= ActionView::Base.full_sanitizer.sanitize (project.description) %></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<%= link_to 'More Details', project_path(project), class: 'btn btn-primary' %>
</div>
</div>
In order to get the modal working for each project, I have added the project.id to the Modal id. So, I am actually creating many modals, one for each project.
<% #projects.each do |project| %>
<%= link_to (image_tag project.pictures.first.url), "##{project.id}", class: 'btn', role: 'button', data: { toggle: 'modal' } %>
<%= render 'projects/modal', project: project %>
<% end %>
Well, everything is working fine, but I don't like it! It will became a loading problem if I have many projects.
So, I would like to find a way to not load all modals. I would like to have one modal template that is populated by the project information.
Any idea on how to improve it?
NOTE: I don't have rails set up at the moment, so can't test this directly, but should work:
Put the following generic modal code into the modal partial:
<div id="genericModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3></h3>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<%= link_to 'More Details', nil, class: 'btn btn-primary' %>
</div>
</div>
Include the following at the top of your view:
<script>
function populateModal(projectId) {
$(".modal-header").find("h3").html($(projectId).find("#p_title").html());
$(".modal-body").find("p").html($(projectId).find("#p_desc").html());
$(".modal-footer").find("a").attr("href", $(projectId).find("#p_link > a").attr("href"));
$("#genericModal").modal('show');
}
</script>
Then further down in your view, you can do something like this:
<%= render 'projects/modal' %>
<% #projects.each do |project| %>
<%= link_to (image_tag project.pictures.first.url), html => {:onclick => "populateModal('##{project.id}')", :class => 'btn', :role => 'button'} %>
<div id="#{project.id}" class="hide">
<span id="p_title"><%= project.title %> <small><%= project.sub_title %><small></span>
<span id="p_desc"><%= ActionView::Base.full_sanitizer.sanitize (project.description) %></span>
<span id="p_link"><%= link_to project_path(project) %></span>
</div>
<% end %>
Create a single modal, not one for each project. Use javascript to open the modal on each link (instead of data-toggle="modal") and before you do, set the project's title, subtitle, description and link using Javascript.