I'm trying to render a HTML with a partial inside of a block but the only thing that renders are the last 4 closing </div> elements.
Here is my code:
<%= new_item_modal do |i| %>
<div class="modal fade" id="newItemModal" tabindex="-1" role="dialog" aria-labelledby="newItemModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="new-item" style="overflow:scroll;height:500px;">
<%= render partial: "/items/form", locals: { remote: true, item: #item, categories: #categories }%>
</div>
</div>
</div>
</div>
<% end %>
And my new_item_modal function:
def new_item_modal(&block)
if current_location.present? && can_access("create", "items")
#item = Item.new
#categories = current_location.categories
block.call
end
end
Your first line should read <%= new_item_modal do |item, categories| %> and your new_modal_item method should have block.call(#item, #categories). Make sure you rename the variables passed to the partial (for example, from #item to item).
Related
I have the following modal on my page that works perfectly:
<!-- New Topic Modal -->
<div class="modal fade" id="newTopicModal" tabindex="-1" role="dialog" aria-labelledby="newTopicModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newTopicModalLabel">Add a New Topic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "topics/js_form", locals: {topic: #new_topic } %>
</div>
</div>
</div>
</div>
And is triggered by this:
<p class="text-center">Select a topic to add below or <a data-toggle="modal" data-target="#newTopicModal">create a new topic</a>.</p>
However, when I copied it over and tried to do a second one for projects, the screen greys over but no modal appears.
The modal that does NOT work is this:
<!-- New Project Modal -->
<div class="modal fade" id="newProjectModal" tabindex="-1" role="dialog" aria-labelledby="newProjectModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newProjectModalLabel">Add a New Project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "projects/js_form", locals: {project: #new_project } %>
</div>
</div>
</div>
</div>
Triggered by this:
<p class="text-center">Select a project to add this source to below or <a data-toggle="modal" data-target="#newProjectModal">create a new project</a>.</p>
I can't tell why the first one works and the second one doesn't. Can anyone spot what I'm doing wrong?
I have created the rails app that has a gallery. Now i am willing to have gallery cover photo. I want to update the cover photo using modal. to upload the photo i am using paperclip.
This is my model:
class Gallery < ActiveRecord::Base
has_attached_file :cover_url, :styles => { :small => "108x76" }
validates_attachment_content_type :cover_url, :content_type => ['image/jpeg', 'image/jpg', 'image/png']
end
This is my controller:
def update
puts params
respond_to do |format|
if #gallery.update(gallery_params)
format.html { redirect_to galleries_galleryhome_path(id: params[:id]), notice: 'Gallery was successfully updated.' }
format.json { render :show, status: :ok, location: #gallery }
else
format.html { render :edit }
format.json { render json: #gallery.errors, status: :unprocessable_entity }
end
end
end
def gallery_params
params.require(:gallery).permit(:name, :shoot_date, :release_date, :expiration_date, :archive,:gallery_layout_id, :contact_id,:status, :cover_url).merge(brand_id: current_brand.id,user_id: current_user.id)
end
This is my View:
<div class="cover-photo default pull-left">
<% if #find_gallery.cover_url.present?%>
<%=image_tag #find_gallery.cover_url.url(:small)%>
<%end%>
</div>
<div class="icon-cta" data-toggle="modal" data-target="cover_modal">
<% if #find_gallery.cover_url.present? %>
<%=link_to "Add<br>Cover".html_safe, "#profile-change" ,'data-toggle': "modal", class: "change-cover"%>
<% else %>
<%=link_to "Add<br>Cover".html_safe, "#album-title-popup" ,'data-toggle': "modal", class: "change-cover"%>
<% end %>
</div>
<!-- Album Cover Modal -->
<div class="modal fade" id="profile-change" 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">Album Cover</h4>
</div>
<%= form_for #gallery_cover,html: {multipart: true}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
<%= label_tag "photo"%>
<div class="modal-body">
<%= f.hidden_field :cover_url,id: "hidden_cover_url"%>
<div class="empty stack">
<%= image_tag #find_gallery.cover_url.url,size: "355x237",id: "changecover"%>
</div>
</div>
<div class="modal-footer pull-left">
<button data-toggle="modal" data-target="#album-title-popup" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-trash set-stack"></span>Remove</button>
<button data-toggle="modal" data-target="#album-add-cover" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-picture-o set-stack"></span>Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= f.submit "Save"%>
</div>
<%end%>
</div>
</div>
</div>
<!-- Add Album Photo Modal -->
<div class="modal fade" id="album-add-cover" 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">Add Cover</h4>
</div>
<div class="modal-body">
<%= form_for #gallery_cover,html: {id: "Cover-Upload"}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
<ul class="source-links">
<li class="js-cover-flow-upload">
<span class="btn btn-file">
<p>Upload From Computer</p>
<%=f.file_field :cover_url, id: "Computer-Upload", onchange: "document.getElementById('hidden_cover_url').val = window.URL.createObjectURL(this.files[0])" %>
<%= f.hidden_field :id, value: params[:id]%>
</span>
<span class="fa fa-caret-right pull-right"></span>
</li>
<li class="js-cover-flow-random">
<span class="btn btn-file">
<p>Choose From Gallery</p>
</span>
<span class="fa fa-caret-right pull-right"></span>
</li>
</ul>
<%= image_tag "image",id: "sample"%>
<%= f.submit "Save", style: "display:none;",id: "Pc"%>
<% end %>
</div>
</div>
As you can see above there are two modals. On clicking of Add Cover Link #profile-change modal will open. This modal is having the button Change. On clicking this button it will open second modal i.e. #album-add-cover modal. On the second modal i can select the image to upload. As soon as i select the photo i should be redirected to first modal with the value selected on second modal so that i can update the cover photo of gallery on submitting the form on first modal.
This is the script that i have wrote:
function updatecover(input){
if (input.files) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$("#changecover").attr('src', e.target.result);
}
}
}
$("#Computer-Upload").change(function(){
updatecover(this);
alert($(this).val());
$("#changecover").attr("src",$(this).val());
// $("#Pc").click();
});
The above script is displaying the selected file on the first modal but on saving the photo it gives me error of:
Paperclip::AdapterRegistry::NoHandlerError in GalleriesController#update
It is updating the profile pic without loading the first modal.
Please any one can help me? Thank you in advance.
In Rails 4 I'm trying to render show.html.erb on my index page inside a bootstrap modal.
index.html.erb:
<% #links.each do |item| %>
<h4><%= link_to (item.title), '#myModal', 'data-toggle' => 'modal' %>
Submitted <%= time_ago_in_words(item.created_at) %> ago
</h4>
<div class="modal fade" id="myModal" tabindex="-1" role="document" 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">Modal title</h4>
</div>
<div class="modal-body">
<%= render :partial => 'show_modal', :locals => { :item => item } %>
</div>
</div>
</div>
</div>
</div>
<% end %>
_show_modal.html.erb:
<div class="col-md-offset-2 col-md-4" id="telegraph">
<h1><%= item.title %></h1>
<p><%= item.content %></p>
</div>
Currently, the modal is showing nicely, but no matter which link I click, the modal only ever displays the data for the very first link inside #links
Any help would be great.
You need to name each modal differently.
Try setting each modals id to myModal-id where id is the id of the item
For example:
<h4><%= link_to (item.title), "#myModal-#{item.id}", 'data-toggle' => 'modal' %>
Submitted <%= time_ago_in_words(item.created_at) %> ago
</h4>
and
<div class="modal fade" id="myModal-<%= item.id %>" tabindex="-1" role="document" aria-labelledby="myModalLabel">
How can I pass a variable to my model which is outside the view? The problem is, I had to move the model to application.html.erb because there were z-index conflicts with having the modal code within the products/index.html.erb view.
For example, I'd like to pass the <%= product.id %> variable to the modal popup.
products/index.html.erb
<% products.each do |product| %>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#productDetails" productId="<%= product.id %>">
Launch <%= product.id %>
</button>
<% end %>
layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div id="page-wrapper">
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
</div>
<!-- Modal -->
<div class="modal fade" id="productDetails" 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">Modal title</h4>
</div>
<div class="modal-body product-content">
...
</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>
</body>
</html>
Attempts
I've tried adding javascript to pass the variable, but nothing showed up:
<script>
$('#productDetails').on('show.bs.modal', function(e) {
var $modal = $(this),
productId = e.relatedTarget.productId;
$.ajax({
cache: false,
type: 'POST',
url: 'backend.php',
data: 'EID=' + productId,
success: function(data) {
$modal.find('.product-content').html(productId);
}
});
})
</script>
I've also tried adding a partial within products/index.html, but the modal cannot be called from within products/index.html.erb because of the z-index conflicts.
I don't know what the php part is all about. However, ignoring that part and assuming no one would do something like that, here is how you would handle this in rails:
make the button a remote method call with link_to(something like this):
<% products.each do |product| %>
<%= link_to 'Launch', product, { data: { toggle: 'modal', target: '#productDetails' }, class: 'btn btn-primary btn-lg', remote: true } %>
<% end %>
create js.erb file for show called products/show.js.erb (this assumes #product is defined in controller):
$('#productDetails').html("<%= j render partial: 'show', locals: { product: #product } %>");
move everything from under modal div out into products/_show.html.erb partial:
<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">Modal title</h4>
</div>
<div class="modal-body product-content">
...
</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>
I have a Deal model with a column/attribute called 'deal_info' which is a json column.
It looks like this for example
deal1.deal_info = [ { "modal_id": "4", "text1":"lorem" },
{ "modal_id": "6", "video2":"yonak" },
{ "modal_id": "9", "video2":"boom" } ]
deal2.deal_info = [ { "modal_id": "10", "text1":"lorem" },
{ "modal_id": "11", "video2":"yonak" },
{ "modal_id": "11", "image4":"boom" } ]
On my view deal.html.erb, i have:
<%= for deal_nb in 0..#deal.number_of_deals do %>
<div class="modal fade" id="myInfoModal<%= modal_nb %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- render the right modal type -->
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: deal_nb %>
</div>
<% end %>
Above, as you see above, I'd like to pass for each iteration of the loop inside parameter_i_want_to_pass the number of the iteration loop (2nd iteration would be parameter_i_want_to_pass= 2 for example).
On the partial I have:
<div class="modal-dialog">
<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">this is mt4</h4>
</div>
<div class="modal-body">
this is the text: <%= #deal.deal_info[parameter_i_want_to_pass]['text1'] %>
</div>
</div>
I get the following error:
no implicit conversion of String into Integer (on line "this is the text: <%= #deal.deal_info[parameter_i_want_to_pass]")
Actually I even tried to detect more easily the bug by just passing a set number instead of the variable 'deal_nb'
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: 2 %>
But I still get exactly the same error.
EDIT
To help identify the problem, if I replace inside the partial view, #deal.deal_info[parameter_i_want_to_pass]['text1'] by #deal.deal_info[2]['text1'], then it works so the problem must really be that the partial view does not want to receive the number I set inside the deal.html.erb
<div class="modal-dialog">
<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">this is mt4</h4>
</div>
<div class="modal-body">
this is the text: <%= #deal.deal_info[2]['text1'] %>
</div>
</div>
</div>
EDIT 2
Just to update the question, I managed to solve a part of the problem. i used the method to_i to transform the string in a number
So the code above now works, it pass the information (parameter_i_want_to_pass =2) to the partial view. I checked it.
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: 2 %>
But the remaining problem, is how to not set it to 2 but to pass the number of the iteration loop
<%= for deal_nb in 0..#deal.number_of_deals do %>
<div class="modal fade" id="myInfoModal<%= modal_nb %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- render the right modal type -->
<%= render "layouts/modal_type_partials/mt#{ #deal.deal_info[deal_nb]['modal_id'] }", parameter_i_want_to_pass: deal_nb %>
</div>
<% end %>
Here I run into an Error
undefined local variable or method `modal_number'
Your variable names are a little confusing, but I think this is what you're trying to do. I am using the each_with_index method to loop through each modal inside of the deal's deal_info. Then I use the locals: { } argument for render partial: in order to pass variables to the partial. The partial then refers to these variables like they are defined locally. The partial doesn't even really end up needing the index variable, but I showed how you would pass it anyway.
View
<% #deal.deal_info.each_with_index do |modal, index| %>
<div class="modal fade" id="myInfoModal<%= index %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- render the right modal type -->
<%= render partial: "layouts/modal_type_partials/mt#{ modal['modal_id'] }", locals: { modal: modal, index: index } %>
</div>
<% end %>
Partial
<div class="modal-dialog">
<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">this is mt4</h4>
</div>
<div class="modal-body">
this is the text: <%= modal['text1'] %>
</div>
</div>
...
deal1.deal_info = [ { "modal_id": "4", "text1":"lorem" },
{ "modal_id": "6", "video2":"yonak" },
{ "modal_id": "9", "video2":"boom" } ]
is not valid ruby code. You need to parse the json string:
require 'json'
deal1.deal_info = JSON.parse('[
{ "modal_id": "4", "text1":"lorem" },
{ "modal_id": "6", "video2":"yonak" },
{ "modal_id": "9", "video2":"boom" }
]')
This will convert it into an array of hashes:
[{"modal_id"=>"4", "text1"=>"lorem"}, {"modal_id"=>"6", "video2"=>"yonak"}, {"modal_id"=>"9", "video2"=>"boom"}]