I'm trying to add a modal to my index page by rendering the modal partial onto the page. Whenever I add the partial, it adds it 30 times, 1 for each record displaying. This only occurs when I do index as: :block.
Here's my code:
index as: :block, download_links: true do |ticket|
div :for => ticket, class: "ticket #{ticket.current_state}" do
resource_selection_cell(ticket) if authorized?(:export, ticket)
render ticket, actions: true
end
render partial: 'resolve_modal'
end
_resolve_modal.html.erb
<!-- Modal -->
<div class="modal fade" id="resolve-modal" tabindex="-1" role="dialog" aria-labelledby="resolve-modal" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="resolve-modal-title">Resolve</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body text-left">
<div class="text-center alert status"></div>
<div class="form-group">
<label for="resolution">Resolution</label>
<textarea class="form-control" id="resolution" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="resolve-button">Resolve</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Again, it's showing the modal 30 times. I only want it be in the source code 1 time. Can anyone help?
One way you could do this is by defining your own custom index, subclassing ActiveAdmin::Views::IndexAsBlock and adding your modal to the build method after it iterates over the collection.
Related
When some one click on a Add new button in index.html.erb the form popup will show on this page the form date will come from new.html.erb so how I can do this I am using bootstrap.
Please any example.
First of all, cpoy this modal code, it is official from bootsrap,
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Copy the modal from here and go to index.html.erb
Place a
<%= link_to (your_edit_path) do %>
# place modal here After inserting your required fields using form_for helper
<% end %>
now on the submit button rails will automatically send a post request to create action in your_controller. and boom, your task is done.
Do, let me know if you face any difficulty. I will help you in any case.
I'm trying to make a link to bootstrap modal through clicking image.
I'm basically trying to adapt bootstrap demo code to ruby tags.
<%= link_to 'data-toggle' => 'modal', 'data-target' => '#exampleModalLong' do %>
<%= image_tag("https://i.imgur.com/qtVofCH.jpg", :class => "portfolio-image") %>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
...
</div>
</div>
<% end %>
But this doesnt work. This makes it go to the top of the page, adding
?data-target=%23exampleModalLong&data-toggle=modal
to the url.
Edit1: Now i target the modal with just '#exampleModalLong':
<%= link_to '#exampleModalLong', 'data-toggle' => 'modal' do %>
<%= image_tag("https://i.imgur.com/qtVofCH.jpg", :class => "portfolio-image") %>
<% end %>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
...
</div>
But it still won't work properly. Atleast it doesn't bring me back on the top of the page. And adds
/#exampleModalLong
to the url.
I don't know why wont it trigger the modal div, when I target it through id.
This solution worked for me Modal bootstrap, image instead of button. Have you tried it?
Be careful to change the id of the modal to have the same in the data-target attribute of your <a> tag and in the id of the <div> for your Modal window.
<!-- Button -->
<a data-toggle="modal" data-target="#exampleModalLong">
<%= image_tag("https://i.imgur.com/qtVofCH.jpg") %>
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I'm having some trouble with a bootstrap modal in rails 4. I'm trying to display a modal when you click an image. And actually the modal is displayed, but only for a few seconds, and then it close itself.
(I'm using bootstrap-sass gem)
This is the code I have:
<%= link_to image_tag (destacado.imagen.small), data: {toggle: "modal", target: "#myModal"} %>
<!-- 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-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">
...
</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>
Any idea what I am doing wrong?? Thank you in advance for any help!
Peyu
I think this is because your link_to will redirect the page.
Not a lot of information is provided, so that's just my guess.
If you wanted your link to just do data-toggle behaviour, maybe it doesn't need to be a link, just an image_tag with data-toggle behaviour.
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">
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")