RoR link_to action in div and pass params - ruby-on-rails

I have link_to and when i click link then div(id="edit_comment_form") showed (This div is form for user edit content) and i want pass params[:cc] from link_to to div This is source code.
<%= link_to "Edit", "#edit_comment_form", :class => "btn", "data-toggle" => "modal" %>
<div id="edit_comment_form" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<%= form_tag({controller: "comments", action: "edit"}, method: "get", class: "xxx") do %>
<div class="modal-body">
<%= text_area_tag :comment, "" ,rows: 10,:style => "width:515px; resize: none;",:placeholder => "Please type your comment." %>
<%= hidden_field_tag(:cc, params[:cc]) %> ### I want params[:cc]
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<%= submit_tag "Vote",:class => "btn btn-primary" %>
</div>
<% end %>
How can i pass params to div. Please help me!

You will need to use "data-cc" if you want it to be an HTML attribute on the <a> element and not break the validity of your HTML. You will need to write a custom javascript onclick handler if you want to pass data into the form on click, regardless of how you structure the data into the <a> element that link_to creates.
This post states you shouldn't use data-toggle when you want additional functionality, to prevent some other issues that will arise. You will likely need to build out a full onclick event handler yourself.

Related

How to a parameter from my URL to Modal and Controller in Rails 4 application

All, i am facing an issue with passing a parameter into my Modal to sent the value of a field. I am able to pass and lookup the value via params if i go to new page where i can find the value from the URL params. But i am trying to use the same logic but in a modal and i can't seem to get it to work.
_my comments partial has the following
<% Reply.all.each do |reply|%>
<% if reply.parent_id == comment.id%>
<p class="feed-s-connection-update-item__headline Sans-1px-black-55%">
<%= image_tag(User.find(reply.user_id).avatar,:size => "20x20",class: "image-responsive") %>
<%=reply.body %>
</p>
<%end%>
<%end%>
<% from_reply_form ||= nil %>
<% unless from_reply_form %>
<p>
<%= link_to 'reply', new_reply_path( :id => comment.id) %>
</p>
<%= link_to 'Add release', new_reply_path(#reply,:id => comment.id), {:remote => true, ':id' => 'comment.id','data-toggle' => "modal", 'data-target' => '#replyModal'} %>
<% end %>
<div id="modal-window" class="modal hide fade" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"></div>
</div>
</li>
</ul>
<%end%>
I am trying this out using this link:
<%= link_to 'Add release', new_reply_path(#reply,:id => comment.id), {:remote => true, ':id' => 'comment.id','data-toggle' => "modal", 'data-target' => '#replyModal'} %>
If i use i am taking to the new page and will have the params in the url which works fine
url: https://hidemyurldevel/replies/new?id=72
<%= link_to 'reply', new_reply_path( :id => comment.id) %></p>
I am able to see the same URL when i try the other URL where remote is true, but i am not able to see the PARENT_ID populated.
Replies_controller - know this part i need to remove the respond but i have it break here so i can see whats returning
def create
#reply = Reply.new(reply_params)
if #reply.save
flash[:notice] = "thanks for reply"
respond_to do |format|
format.js
redirect_to :back
end
end
end
def new
#reply = Reply.new
#comment = Comment.find(params[:id])
#userid = current_user.id
end
Here is the Modal i call
for some reason the value is not populated into the Modal
<%= form_for(#reply) do |f| %>
<div id="replyModal" class="modal fade" tabindex="-1" role="dialog" aria- hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria- hidden="true">×</button>
Post A Reply
</div>
<div class="modal-body">
<form class="form center-block">
<div class="form-group">
Post <%= f.text_area :body, class:"form-control input-lg" %>
<%= f.hidden_field :user_id, :value =>#userid %>
<%= f.hidden_field :parent_id, :value =>#comment.id %>
</div>
<div class="field">
</div>
</form>
</div>
<div class="modal-footer">
<div>
<button class="btn btn-primary btn-sm" data-dismiss="modal" aria-hidden="true">reply</button>
<ul class="pull-left list-inline"><li><i class="glyphicon glyphicon-upload"></i></li><li><i class="glyphicon glyphicon-camera"></i></li><li><i class="glyphicon glyphicon-map-marker"></i></li></ul>
</div>
<div class="actions">
<%= f.submit class: "btn btn-primary btn-sm"%>
</div>
</div>
</div>
</div>
<%end%>
I can't seem to be able to use the parent_id from the URL and pass it into the
This works fine if you go to the new page but not when i try passing it into the URL to the controller. Please help!
So guys i solve my problem... I am not sure if this is the right way to go, but i wasn't setting the comment parameters and it was Nill to begin with.... i just initialize the comment and set it to the instance of the comments and that works..
Excerpt
i am iterating the comment
then in my reply section where i add a comment field next to each comment i am able to pass the value in the URL
<%#comment = comment%>
<%= link_to 'Add release', new_reply_path(:#comment => comment), {:remote => true, :id => comment.id,'data-toggle' => "modal", 'data-target' => '#replyModal'} %>

Problems with Modal in Rails opening the same object

I'm maintaining an older Rails 3.2.22 app and I'm trying to add a modal to pop up with a simple form to add a note.
Here is my view (cut down for readability)
<% #assigned.each do |call| %>
<%= link_to "Notes", '#ajax-modal', data: { toggle: "modal", target: "#note-modal" }, class: 'btn btn-small btn-inverse' %>
<%= render 'layouts/note_modal', :call => call %>
<% end %>
Here is my modal app/views/layouts/_note_modal.html.erb
<div id="note-modal" class="modal hide fade" tabindex="-1">
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"><%= call.incident_number %> Notes</h3>
</div>
<div class='modal-body'>
<div class="modal-body-content">
<%= form_for(#note, url: call_note_calls_path, html: {class: "form-inline"}) do |f| %>
<%= f.text_field :message, :maxlength => 255 %>
<%= f.hidden_field :call_id, value: call.id %>
<%= f.hidden_field :user_id, value: current_user.id %>
<%= f.button "Add Note", class: 'btn btn-info btn-small', data: {disable_with: "<i class='icon-spinner'></i>Posting..."} %>
<% end %></div>
<div class="ajax-loader">
</div>
</div>
<div class='modal-footer'>
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
</div>
When I load the page and there are several calls I click on the notes link, the partial renders in a modal and I can submit a note. The problem is if I have 10 calls on the screen no matter which notes link I click on it adds a note to the first call on the screen.
Am I passing locals incorrectly? I know this code is inside of the block so it should pull the call object and pass it as a local to the partial in the modal but it's not.
Any help is greatly appreciated.
I think the issue is that you render the modal each time for a note but they all have the same id. So you are always opening the first modal. Actually IMHO you just need to render the modal once and pass the note_id via an data attribute on the link which triggers the modal. So basically configure the modal via the caller.
I was able to figure this out on my own and still render the partial within the loop by calling an index as part of the target ID for the modal. Working code below.
<% #assigned.each_with_index do |call, index| %>
<%= link_to "Notes", '#note-modal', data: {toggle: "modal", target: "#note-modal#{index}" }, class: 'btn btn-small btn-inverse' %>
<%= render 'layouts/note_modal', call: call, index: index %>
<% end %>
<div id="note-modal<%= index %>" class="modal hide fade" tabindex="-1">
<div class='modal-header'>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title"><%= call.incident_number %> Notes</h3>
</div>
<div class='modal-body'>
<div class="modal-body-content">
<%= form_for(#note, url: call_note_calls_path, html: {class: "form-inline"}) do |f| %>
<%= f.text_field :message, :maxlength => 255 %>
<%= f.hidden_field :call_id, value: call.id %>
<%= f.hidden_field :user_id, value: current_user.id %>
<%= f.button "Add Note", class: 'btn btn-info btn-small', data: {disable_with: "<i class='icon-spinner'></i>Posting..."} %>
<% end %></div>
<% call.notes.each do |n| %>
<li><%= n.message %> added by <%= n.user.username %></li>
<% end %>
<div class="ajax-loader">
</div>
</div>
<div class='modal-footer'>
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
</div>

How do I render the same partial multiple times on a page with locals

In my have app I have a concept of notes... On the page I list out all the notes with an edit button. This edit button opens up a modal for editing the note. This all works great except for one big problem. If I have 5 notes, when I click the first edit button, it edits the first note as expected... However if I click on the second edit button, it ALSO edits the first note INSTEAD of the second. Same for the third, etc. Basically no matter what edit button I click I am always editing the first note.
User controller
def show
#user = User.find(params[:id])
#notes = #user.notes.order('created_at DESC')
end
Index page
<% #notes.each do |note| %>
<td><%= note.body %></td>
........
<td>
<%= button_tag text, class: "btn btn-primary", data: {toggle: "modal", target: "#edit_note"} %>
<%= render partial: "edit_note_modal", locals: { note: note } %>
</td>
<% end %>
Note Modal
<div class="modal fade" id="edit_note" tabindex="-1" role="dialog" aria-labelledby="edit_note" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Note</h4>
</div>
<div class="modal-body">
<%= form_for note do |f| %>
<div class="form-group">
<label for="keyword">Keyword</label>
<%= select_tag :keyword, options_for_select(<SOME FUNCTION>, selected: note.keyword ), class:"form-control" %>
</div>
<div class="form-group">
<label for="body">Body</label>
<%= text_area_tag :body, note.body , class:'form-control' %>
</div>
<div class="modal-footer">
<%= submit_tag "Update Note", class: "btn btn-primary" %>
</div>
<% end %>
</div>
</div>
</div>
</div>
That is because you use the same ID and ID should be uniq so when it search for the ID in the index page once it hit the first Note with that ID edit_note it will open it, what you can do is have different Id for each view as following:
index page:
<%= button_tag text, class: "btn btn-primary", data: {toggle: "modal", target: "#edit_note_#{note.id}"} %>
Note Modal:
<div class="modal fade" id="edit_note_#{note.id}" tabindex="-1" role="dialog" aria-labelledby="edit_note" aria-hidden="true">
Note how the id now is edit_note_#{note.id} and the edit button try to open model with same target edit_note_#{note.id}

Rails 4.0.4 custom form_for route

I'm trying to map a form_for to a specific controller and action. I've got the resources: apikey in the routes. All the solutions I've found don't seem to work. The form is placed inside a view of which the parent folder name doesn't correspond to the correct controller. Here is my form with my not working solution:
<%= form_for #key, url: { controller: :apikey, action: :update }, remote: true do |f| %>
<%= f.label :userkey, "Key" %>
<%= f.text_field :userkey %>
<%= f.submit "Update" %>
<% end %>
Here is my controller:
class ApikeyController < ApplicationController
def index
end
def update
respond_to do |format|
if #key.update(apikey_params)
format.js
else
format.html { render action: 'edit' }
end
end
end
private
def apikey_params
params.require(:apikey).permit(:userkey)
end
end
This is the log I get in the console:
Started GET "/accounts?utf8=%E2%9C%93&_method=patch&apikey%5Buserkey%5D=thekey&commit=Update"
As you can see, it doesn't call the apikey but the accounts controller. What am I doing wrong?
Update
A little weird, as I didn't really change anything, I now get this error when opening the site:
No route matches {:action=>"update", :controller=>"apikey"}
This is my rake routes:
apikey_index GET /apikey(.:format) apikey#index
POST /apikey(.:format) apikey#create
new_apikey GET /apikey/new(.:format) apikey#new
edit_apikey GET /apikey/:id/edit(.:format) apikey#edit
apikey GET /apikey/:id(.:format) apikey#show
PATCH /apikey/:id(.:format) apikey#update
PUT /apikey/:id(.:format) apikey#update
DELETE /apikey/:id(.:format) apikey#destroy
Update 2
Originally I had the form inside a bootstrap modal, like this:
<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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Change API key</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<%= form_for #key, method: "post", remote: true do |f| %>
<%= f.label :userkey, "Key" %>
<%= f.text_field :userkey, class:"form-control", id:"apikeyinputfield" %>
<%= f.submit "Update", class: "btn btn-success btn-sm" %>
<% end %>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submitnewapikey" data-dismiss="modal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
If I delete the surrounding modal, the form automatically to map to the correct controller and action. This is not the case when surrounded by the modal. Really weird. Maybe the modal JS code messes up the form_for JS code.
You don't actually need to specify the url in form_for.
If no url is specified form_for will automatically identify which controller and method based on the #key parsed to it, regardless of what view the form is located.
<%= form_for #key, remote: true do |f| %>
<%= f.label :userkey, "Key" %>
<%= f.text_field :userkey %>
<%= f.submit "Update" %>
<% end %>
the piece code above can have the following outcomes:
if #key is a new record ( #key.new_record? returns true):
The form will send the request to ApikeyController create action
if #key is a not a new record ( #key.new_record? returns false), which is your case:
The form will send the request to ApikeyController update action
More info can be found here.
Hope this can help you.

Rails partial form in a form

I have a Rails app with Expenses that belongs_to Vendors.
While the user is adding a new Expense, they might need to add a new Vendor.
I thought I could just add a button and a Vendor partial to the Expense form.
Like this:
<%= simple_form_for #expense, :html => {:class => 'form-horizontal'} do |f| %>
<div class="span5">
<a data-toggle="modal" href="#vendorform">
<p class="pull-right btn btn-primary btn-mini">New Vendor</p></a>
<%= render :partial => "vendors/vendorform" %>
</a>
<%= f.association :vendor, :label_method => :vendor_name, :label => 'Vendor', collection: Vendor.order('vendor_name ASC') %>
The _vendorform.html.erb looks like this:
<div id="vendorform" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="vendorformLabel" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 id="vendorformLabel">Add Vendor</h4>
</div>
<div class="modal-body">
<%= simple_form_for Vendor.new do |f| %>
(bunch of fields)
</div>
<div class="modal-footer">
<%= f.submit 'Save Vendor', :class => 'btn btn-mini btn-primary' %>
<a class="btn btn-mini" data-dismiss="modal" href="#">Close</a>
<% end %>
</div>
</div>
This partial shows up OK. But, the Vendor record doesn't get created.
The submit of the partial actually somehow triggers the submit for the Expense. The page comes back with all of the required Expense fields red.
I think it's posting to the Expenses controller when the f.submit button in the Vendor partial is pressed !!!
Do I need something in the Expense controller?
Or is there a better way?
Thanks for the help!
Are you sure the vendor partial is in the same folder as the expense form? If not you should have
<%= render :partial => "folder/vendorform" %>
When you have nested attributes, you should use the simple_fields_for method which help manage associations. Then, remove the submit button for the vendor form and add it to the expense form instead. So the vendor form would be -
<div class="modal-body">
<%= simple_form_for Vendor.new do |f| %>
(bunch of fields)
<% end %>
</div>

Resources