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>
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 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.
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.
I have included Bootstrap modal inside my page. But my page just gets grey out when i press on the button and no pop dialog appears. However, when i press the ESC button, the dialog flashes once before exiting. Another instance i tried was, i included //= bootstrap/modal inside my application.js file. Inside this file i also had the line //= bootstrap. When i have both of this line included, the modal only stays for less than 1 second when i press the button.
Below is the code of my view page,
<% provide(:title, "Log in") %>
<div class="center jumbotron">
<h1> Kaching </h1>
<div class = "row" >
<div class="col-md-6 col-md-offset-3">
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :logID, "Log ID" %>
<%= f.text_field :logID %>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control' %>
<%= f.submit "Log In", class:"btn btn-primary" %>
<% end %>
</div>
</div>
</div>
<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<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">
<p>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Thanks
There seems to be no issue regarding your code. For the sake of clarity, i will be explaining all the step regarding modal implementation.
steps
1. include bootstrap.js in your JavaScript, and kindly check there is only bootstrap.js or bootstrap.min; both of them should not present.
2.Modal calling step should be
<button type="button" class="btn btn-primary success" data-toggle="modal" data-target="#myModal">Login
</button>
3.On calling the modal, the codes are
<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">Please Login</h4>
</div>
<div class="modal-body">
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="user name">
<input type="password" class="form-control" placeholder="password">
</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 info">Login</button>
</div>
</div>
</div>
</div>
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">