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.
Related
How to render another controller to rails 2.3.2?
I was tried below code.but not work.
app/controllers/vouchers
app/controllers/voucher_payments
app/views/vouchers/show.html.erb
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#test">test</button>
<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">New Payment</h4>
</div>
<div class="modal-body">
<%= render :template => "/voucher_payments/new" %>
</div>
</div>
</div>
</div>
app/views/voucher_payments/new.html.erb
<h1>Hello!!!!!!!!!!!!!</h1>
can you help me?
thanks.
You should have a folder called voucher_payments in app/views
Now, in that app/views/voucher_payments you should have new.html.erb
app/views/voucher_payments/new.html.erb
So, now, the document says you can render the results of an action to a template in app/views/voucher_payments this way:
<%= render :template => 'voucher_payments/new' %>
<%= render "voucher_payments/new" %>
<%= render :partial => 'voucher_payments/new' %>
I too had the same problem, appending .html fixed it, try this
<%= render :template => '/voucher_payments/new.html' %>
Hope that works for you.
I have an images index page which displays an entire album of photos from the User's Facebook profile in a uniform square grid. To get the square grid shape, I had to use some css which crops a little bit of the image from the sides (essentially a thumbnail).
I want the users to be able to click on an image so that a modal comes up that shows the full image, which they can then crop themselves.
Most importantly, I'm wondering how to make it so the modal that pops up is like a form, where you select the part that you want cropped and then click submit, and the photo and crop parameters get saved to the database
Here is what I have so far:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<% #profile = #graph.get_object("me") %>
<%= #profile["name"] %><br>
<%= link_to 'Sign Out', sign_out_path, method: :delete %>
<br>
<% #albums = #graph.get_connections("me", "albums?fields=name,photos{name, images{source}}") %>
<% #albums.at(3)["photos"]["data"].each do |data| %>
<div id="<%= data["id"] %>" class="myImages" data-toggle="modal" data-target="#myModal">
<%= image_tag data["images"].first["source"] %>
</div>
<% end %>
<script>
$(document).ready(function() {
$(".myImages").click(function (e){
e.preventDefault();
$(".modal-body").html($(this).html());
});
});
</script>
I'm trying to figure out how to manage the ability to call my controller from a link and return the data after all process is completed, while at the same time displaying a modal with that data returned. Here's my logic that I have yet to figure out and hope someone can help;
I've tried the following with no success;
#HTML
<%= link_to "#WidgetGenModal", :data => {:toggle => "modal"}, :action => 'gen_key', :class => 'gen-widget pull-right' do %><i class="fa fa-slideshare fa-1x"></i><% end %>
#CONTROLLER (Widget controller)
protected
def generate_token
user = current_user
self.token = loop do
random_token = SecureRandom.urlsafe_base64(nil, false)
break random_token unless user.widget.exists?(token: random_token)
end
end
#MODAL (Bootstrap)
<div class="modal fade" id="WidgetGenModal" tabindex="-1" role="dialog" aria-labelledby="widgetGenModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="widgetGenModal"><div class="btn btn-danger btn-xs">NEW</div> Share Your Category</h3>
<p>We've made it easier for you to share everything you store / save within your categories. Simply copy the specially generated code, paste it some where on your website or share the link with someone to let them see what you've saved.</p>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div id="test"></div>
<%= f.hidden_field :color, value: '' %><div id="output"></div>
<div class="clearfix visible-xs"></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
I guess I'm having a hard time moving the token into my Modal as that what I'm trying to work out here. Suggestions?
One way to do that is to render empty modal in your view and give an id to its body. After sending an ajax request to the action render .js file that injects the new data to the body of the modal and use
$("#Modal_ID").modal("toggle")
ex ::
in your view ::
<%= link_to "NAME OF LINK", PATH_TO_YOUR_ACTION, :"data-toggle"=>"modal", :"data-target"=>"#WidgetGenModal", class: "company-name-link", remote: true%>
<%= render "YOUR_EMPTY_MODAL_PARTIAL"%>
in your empty modal partial
<div class="modal fade" id="WidgetGenModal" tabindex="-1" role="dialog" aria-labelledby="widgetGenModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="widgetGenModal"><div class="btn btn-danger btn-xs">NEW</div> Share Your Category</h3>
<p>We've made it easier for you to share everything you store / save within your categories. Simply copy the specially generated code, paste it some where on your website or share the link with someone to let them see what you've saved.</p>
</div>
<div class="modal-body" id="WidgetGenModalBody">
</div>
<div class="modal-footer">
<div id="test"></div>
<%= f.hidden_field :color, value: '' %><div id="output"></div>
<div class="clearfix visible-xs"></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Please check your logic for f.hidden_field this is not right.
in your action ::
def your_action
// whatever
format.js
end
in your_action.js file in views
$("WidgetGenModalBody").html('<%= YOUR DATA RETURNED OR PARTIAL CONTAING THE DATA %>')
$("WidgetGenModal").modal("toggle")
I'm trying to create a newsletter subscription from scratch using rails 4 and Twitter Bootstrap 3 modal.
I created a Subscriber model and subscribers controller which contains a 'create' method.
The button which openes the modal has to appear anytime, so I included it in the navbar that is placed in the application.html.erb layout view file.
This is the code I used for the modal: (in views/layout/application.html.erb)
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Newsletter Subscriptions</h4>
</div>
<% form_tag(controller: 'subscribers', action: 'create') do %>
<div class="modal-body">
<p><%= text_field_tag :email, params[:email] placeholder: "Enter your email address" %></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<p><%= submit_tag "Subscribe", class: "btn btn-primary" %></p>
</div>
<% end %>
</div>
</div>
</div>
For some reason it won't show anything in the modal except the title.
Where am I going wrong?
You just need to use <%= form_tag instead of <% form_tag.
In previous versions of Rails, <% form_tag was used I think, but since form_tag is outputting html, it should be used with <%= %>.
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.