I have a form in my view, and upon submission, my controller validates the fields and returns a list of errors in #errors, if any.
Now, I want to display these errors in a modal.
Here's what I have in my View:
!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<%= render 'shared/errors' %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to display this modal on page load, if and only if #errors exists.
It looks like coffeescripts don't have access to variables passed by the controller.
I came across a few similar questions, but none of them seem to solve my problem.
you can do this with the help of gon gem.
Add "gem 'gon'" to your Gemfile.
run bundle install.
set value in controller like this: gon.form_errors = true if #errors.present?
Add this line in application layout in head section before all javascript include tags:- For rails 4: <%= Gon::Base.render_data %> and for rails 3 <%= include_gon %>
Now you can access this variable in your coffee file like this: gon.variable_name and use it like this:
if gon.form_errors
$('#your-modal-id').modal('show')
Related
So..I’m trying to understand usage of modals in Rails and looking for a few pointers.
I have a list of items at at category/1 which are being displayed in a loop. I have a modal which I’m rendering at the bottom of the page with <%= render "category/update_item_modal" %>
There’s already a form setup for updating params of each item, but I’m trying to get a modal pop up to specifically just update the title. The modal popup works, and so far I have the following for the button which opens the modal:-
<button class="btn btn-primary btn-sm">Edit Title</button>
And the modal itself:-
<div class="modal fade" id="updateItemModal-<%= item.id %>" tabindex="-1" role="dialog" aria-labelledby="updateItemModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateItemModalLabel">Change Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- UPDATE TITLE HERE? -->
</div>
</div>
</div>
</div>
This gives me the error of undefined local variable "id" from the modal id for obvious reasons, and this is where my understanding hits a wall. How do I pass the data from a loop iteration into my modal?
End goal is to have an editable textarea field with the existing title in it, and a submit button which will post the edit.
Provided you have defined #item in your controller:
<%= render "category/update_item_modal", locals: item: #item %>
Then you have access to item in your partial. One more thing you can do to avoid that error is to use the safe operation operator item&.id. More on the safe navigation operator here: https://bugs.ruby-lang.org/issues/11537
Say I have a Scaffolded Post with just one field, body.I would like to render the show page for any post by clicking show only instead of loading a separate show page, It loads it inside a modal. Kinda like twitter does
I assume you are using Bootstrap and you would like to use a modal. You will have the list view have the modal with some links.
Now to get the data, we can do it either on page load (lets say data attributes), or on demand through XHR.
I like to get things on demand... so lets make a modal and some links.
<% #posts.each do |post| %>
<%= link_to post.title, post_path(post), remote: true, data: { method: 'get' } %>
<% end %>
<div class="modal fade" tabindex="-1" role="dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Then in the controller we need to make it fire...
class PostsController < ApplicationController
def show
#post = Post.find(params[:id])
respond_to do |format|
format.js
end
end
end
In the view show.js.erb we will do some thing like this.
$('h4.modal-title').html("<%= #post.title %>");
$('.modal-body p').html("<%= #post.body %>");
$('.modal').modal();
Let me know if it has bugs, I just wrote it out of my head and the modal code came right from Bootstrap with no editing. You will probably have to refactor them to make sense.
You cannot render the entire show page directly, but you can do this with a partial. I would recommend creating a partial that encapsulates all of the view information that is common to your show page and your modal. You can then reference that partial in both your show page and your modal reducing the amount of duplicated code.
Partials are normal view files with an underscore as the first character of the file name. For example: _post.html.erb.
You render the partial inside other views with the render command:
#show.html.erb
<%= render 'post' %>
I would also recommend the Rails Guide on Layouts and Rendering
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.
I am using bootstrap modal on my rails project. On this page I have to iterate through my slides and for each slide I want to create a modal. I came up with this solution:
<% #slides.each do |slide| %>
<div class="row slidecard text-center">
<div class="col-xs-12 ">
<h2><%= slide.name.upcase %></h2>
<p><em><%= slide.description %></em></p>
<a href="#" data-target=<%=slide.id%> data-toggle="modal">
<%= image_tag slide.picture.url(:medium) %>
</a>
<div class="modal fade" id= <%=slide.id%>>
<div class="modal-dialog mymodal">
<div class="modal-content text-center">
<div class="modal-body">
<%= image_tag slide.picture.url(:original) %>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div
</div>
I give to the link containing the image the data-target attr and gives it the value that has the slide.id so I can give a specific id and data target that links image and modal. But the problem is that for the modal to work I need to add "#"in front of slide.id to have something that looks like data-target="#39"
I tried a couple of things such has :
data-target= "#"<%=slide.id%>
and other stuff but nothing gives me the result I want and make the modal work !
licence
try to this
I'm trying to get bootstrap-modal.js to work in Rails but can't figure it out. At this point, I'm just trying to get the event to fire when I click the button as in this fiddle
http://jsfiddle.net/mjmitche/xt4aQ/16/
using the exact same code in Rails nothing's happening when I click.
I have this html set up in a view
<h3>Demo</h3>
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Primary
Secondary
</div>
</div>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
And bootstrap-modal.js copied into the javascripts folder in the assets pipeline
In Rails,
But nothing's happening when I click launch in my rails application
= javascript_include_tag "application"
wasn't in the application layout so bootstrap-modal.js also wasn't included. problem now solved.