Passing parameter to partial view - Rails 4/postgresql/json - ruby-on-rails

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"}]

Related

Rails 5.2 Modal Not Opening

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?

Render HTML inside block - Ruby on Rails

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).

Render show page in Bootstrap modal from index

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">

Pass Variable from View to Model outside of view

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>

Gmaps4rails : Using Bootstrap modal with gmaps4rails infowindows

I have managed to apply gmaps4rails in my application
FIRST METHOD
I have a map action like this:
def map
#family = Family.all.to_gmaps4rails do |family,marker|
marker.infowindow render_to_string(:partial => "/layouts/info", :locals => { :family => family})
end
end
in my _info.html.erb:
<h5><%=family.location%></h5>
<%=link_to "View Details","#myModal",class: "btn btn-success",data: {toggle: "modal"} %>
<div id="myModal" 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 id="myModalLabel" style="color:#9D5641;margin-top:10px;">Family Details</h3>
<h5>Family ID : <%=family.famid%></h5>
</div>
<div class="modal-body">
<%= family.persons.count %>
<table class="table table-hover">
<tr>
<th>Name</th>
<th>Mobile No.</th>
<th>Photo</th>
</tr>
<% family.persons.each do |person| %>
<tr>
<td><%=person.name%></td>
<td><%=person.mobnum%></td>
<td><%=person.photo%></td>
</tr>
<%end%>
</table>
</div>
<div class="modal-footer">
<h5><%=link_to "Veiw Full Details", {controller: :managedb ,action: :details, famid: family.famid} %></h5>
</div>
</div>
The bootstrap's modal is rendered fine but with a glitch. It looks like this:
The modal is supposed to be on top of the grey color layer.
I guess this is happening beacause I'm rendering the modal in the infowindow partial. That is why it's css properties are that of the infowindow. How do I make it work as normal modal.
I can remove the background-color which we get once the modal is activated by adding:
.modal-backdrop {background: none;}
to my css file.
But the **modal is not clickable. I cannot click on the links in it and so on.How to fix this?
ALTERNATE METHOD I TRIED
map action
def map
#family = Family.all.to_gmaps4rails do |family,marker|
#fam=family
marker.infowindow render_to_string(:partial => "/layouts/map", :locals => { :family => family})
end
end
_info.html.erb
<h5><%=family.location%></h5>
<%=link_to "View Details","#myModal",class: "btn btn-success",data: {toggle: "modal"} %>
map.html.erb
<div class="container">
<div class="row">
<%= gmaps4rails(#family) %>
<!-- Modal -->
<div id="myModal" 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 id="myModalLabel" style="color:#9D5641;margin-top:10px;">Family Details</h3>
<h5>Family ID : <%=#fam.famid%></h5>
</div>
<div class="modal-body">
<table class="table table-hover">
<tr>
<th>Name</th>
<th>Mobile No.</th>
<th>Photo</th>
</tr>
<% #fam.persons.each do |person| %>
<tr>
<td><%=person.name%></td>
<td><%=person.mobnum%></td>
<td><%=person.photo%></td>
</tr>
<%end%>
</table>
</div>
<div class="modal-footer">
<h5><%=link_to "Veiw Full Details", {controller: :managedb ,action: :details, famid: #fam.famid} %></h5>
</div>
</div>
</div>
Now the modal renders properly but it only has the last family in #fam variable.
How can I pass the family id as parameter from the modal's link?
Finally I did it with the first method.
Altered few css properties of modal
.modal-backdrop {background: none;z-index:-1;}
and
#myModal {z-index:1;}
Now all the elements in the modal are clickable like a normal bootstrap-modal.

Resources