Rails way to pass data from 'for' to modal - ruby-on-rails

I'm trying to pass a variable being defined in an 'for' loop down to a modal button. Currently I have the modal block being rendered in the for as a quick win but I find it redundant to be making the entire modal block in the DOM for nothing.
<h3>User</h3>
<p>Name: <%= #user.name if #user.name %></p>
<p>Email: <%= #user.email if #user.email %></p>
<% #user.authentications.each do |i| %>
<%= i.provider.titleize %><br>
<%= i.created_at.strftime("%m/%d/%Y") %><br>
<button type="button" class="btn btn-info btn-lg modal-btn-swap" data-toggle="modal" data-target="#myModal" data=<%= i.id %>>Delete Auth</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Remove authorization</h4>
</div>
<div class="modal-body">
<p>Some text
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= button_to 'Delete Auth', deauth_url(i.id) %>
<button type="button" class="btn btn-default"></button>
</div>
</div>
</div>
</div>
<% end %>
The concept is to just get a modal popup to give legal information prior to completing the transaction.
I'm thinking I'll need ot use jQuery to swap the href for the link when I click the 1st Delete Auth button.
Input?

If you create the modal once, you will have to write some javascript in the button click handler to populate the modal's attributes with the data you want each time you click, rather than hard coding it into each copy of the modal as you are doing now.
The ruby code would generate the modal -- you would have to leave the button_to('Delete Auth') without a target. Then you can copy the values from the data attribute to the modal when you click the button.

Related

How to display different posts using Modals

I'm new to RoR and I've encountered a problem recently as I am trying to display different posts in different modals. To contextualize I have a Home page on which is displayed every post. Every post contains an author, a content, a like button and a comment button. I want the comment button to open a modal containing again the author's name, the content and an area to comment the post. The problem is that every modal that I click on contains the same author and the same content even if the comment button I clicked on is from a different post. To be precise the content displayed in the Modal is from the most recently posted post. Tell me if you need something in particular and I will be happy to edit this post with the code you'll ask me.
Displaying the posts:
<% #posts.each do |post| %>
<div class="media">
<a class="media-left" href="#">
<div class='circle-icon'>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</div>
</a>
<div class="media-body">
<h2 class="media-heading"><%= post.user.first_name %> <%= post.user.last_name %></h2>
<h4><%= post.content %> </h4>
<br>Submitted <%= time_ago_in_words (post.created_at) %> ago<br>
<%= button_to like_post_path(post), method: :put do %>Like<%= post.get_upvotes.size %>
<% end %>
<span class="glyphicon glyphicon-comment"></span> Comment
And here is my Modal:
<!-- Modal -->
<div class="modal fade .local-modal" id="myModal" 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"><%= post.user.first_name %> <%= post.user.last_name %></h4>
</div>
<div class="modal-body">
<p><%= post.content %> </p>
<hr>
<fieldset class="form-group">
<label for="exampleTextarea">Write your comment:</label>
<textarea class="form-control" id="exampleTextarea" rows="3"> </textarea>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" >Like</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Comment</button>
</div>
</div>
</div>
</div>
Here is my JS Script:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').popover({ html : true});
});
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
</script>

How to open same modal with two different links with different behaviour?

I am having a modal that have two divs in it. Now i am willing to open the same modal with two different links.
Here is my modal:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<%= link_to "Back","#",class: "btn btn-default",id: "Back-Link",style: "display:none"%>
<%= link_to "Next","#",class: "btn btn-default",id: "Next-Link"%>
<div id="One">
<p>Some text in the modal.</p>
</div>
<div id="Two" style="display:none">
<p>Modal Two.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Following are the links:
<%= link_to "Test","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
<%= link_to "Test1","#", 'data-toggle': "modal", 'data-target': "#myModal"%>
When I click on "Test" Link the modal should open with div id "One". And when i click on "Test1" the modal should open with div id "Two".
can anyone help me? Thank you in advance
Here is a working fiddle.
I made use of the data attributes to store id of div to show inside the modal. Then on click of it, I changed its style from display:none to block.
<div class="modal-body">
<div id="one" class="hide_first">
<p>Some text in the modal.</p>
</div>
<div id="two" class="hide_first">
<p>Modal Two.</p>
</div>
</div>
Open #One
Open #Two
<!-- Storing the id of divs in data-modal-show -->
And write some javascript like this
//classes given to our links
$(".modal-open-links").on("click", function(e){
//First set display:none for all divs
$(".hide_first").css("display", "none");
//hide_first class is on both our divs inside modal body that we want to alternatively show
content_to_show = $(this).attr("data-modal-show");
//the div id we want to show on modal open
//Show the one we clicked
$("#" + content_to_show).css("display", "block");
});

Getting data in each loop rails

In my rails application I have this each loop
<ul>
<% #job.job_applications.each do |job_application| %>
<li>
<%= raw (simple_format(job_application.cover_letter)) %>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#pdfModal">
view cv
</button>
<!-- Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style = "height:500px; width:1000px;">
<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">Modal title</h4>
</div>
<div class="modal-body" style = "height:500px; width:1000px;">
<iframe src="<%= job_application.resume.url %>" frameborder="0" style = "height:100%; width:100%;"></iframe>
</div>
</div>
</div>
</div>
</li>
<% end %>
</ul>
So what I'm trying to do is to get the cover_letter and open the resume in modal for every job_application but the problem is for resume because whatever the resume that I open it will show the first application resume in modal So I am wondering why I'm getting this is there any error in my code because something like thsi <%= link_to "Applicant cv", job_application.resume.url %> work just fine but I want to open resume in modal
Your problem is that you are creating many modal divs, all with the id of "pdfModal", and every button on your page is targeting the SAME id. In CSS, an ID is supposed to be used only once per page. So, to fix your problem, I'd suggest adding an index to your each loop, naming each modal according to the index, and then having the button point to that specific modal.
<% #job.job_applications.each_with_index do |job_application, index| %>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#pdfModal-<%= index %>">
<div class="modal fade" id="pdfModal-<%= index %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

How to call controller action on click and modal in Rails

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

Rails form above Twitter Bootstrap modal

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 <%= %>.

Resources