问题
My app has a select box for users to choose a "venue". This select box is, as you would expect, in a form. I also have an action somewhere on the page that creates a new venue via AJAX. After the new venue is created, I would like to updated the venue select box to reflect this.
My solution was to put the select box in a partial and render the partial from the create action in the controller.
<div id="venue_select" style="clear: both;">
<%= render :partial => 'venue/venue_select_box' %>
</div>
The partial looks like this:
<%= f.collection_select :venue_id, @user_venues, :id, :name, :prompt => 'Select a venue' %>
where f is the form reference:
<% form_for :shows do |f| %>
The problem is that f is undefined in the partial, so I get an error. One solution would be to include the entire form, but I feel like that should not be necessary because I am not updating the entire form. Any ideas on how to go about this?
回答1:
You can pass a variable to the partial like this:
<%= render :partial => 'venue/venue_select_box', :locals => { :f => f } %>
For stuff like this it is always good to look at the documentation.
EDIT: To use the partial with AJAX request you'll need to "recreate" the form in your .rjs template. So in your controller you'll need to find the object again.
def venue_select
@venue = Venue.find(params[:id])
respond_to do |format|
format.html
format.js
end
end
Then in your venue/venue_select.rjs file:
form_for @venue do |f|
page[:element].replace_html :partial => 'venue/venue_select_box', :locals => { :f => f }
end
Where :element
is the id of the select menu you want to replace.
Basically you just recreate the form_for and then use that to update the select field.
回答2:
It might be easier to add the venue to the selectbox with Javascript, as an onComplete
hook on your AJAX add.
回答3:
I agree with Sarah Mei on this, if anything have your AJAX call return a JSON representation of the venue that was added and then create a new option and add it to the select element.
Some general JS code for adding a select option:
var newOption = new Option("Text", "Value");
selectElement.options[selectElement.options.length] = newOption;
回答4:
These are all great options but I think I found the easiest. Basically, I just hard coded the name in the collection_select so I would not need the "f" variable:
<%= collection_select 'shows[venue_id]', :venue_id, @user_venues, :id, :name, { :prompt => 'Select one of your previous venues' } %>
Then my VenueController is as follows:
class VenueController < ApplicationController
layout 'main'
before_filter :login_required, :get_user
def create
begin
venue = @user.venues.create(params[:venue])
@user_venues = @user.venues
render :partial => 'venue_select_box', :success => true, :status => :ok
rescue ActiveRecord::RecordInvalid => invalid
flash[:errors] = invalid.record.errors
render :text => '', :success => false, :status => :unprocessable_entity
end
end
end
If this method is bad practice for any reason, please let me know and I will happily credit you for the answer.
回答5:
I think that your solution is not bad, but If you try to use this partial in another form you have a problem with the name of the field generated.
To avoid this you can submit within the ajax call the content of f.object_name. In your case it will be "shows" and because the method is :venue_id the generated name will be "shows[venue_id]".
来源:https://stackoverflow.com/questions/724045/is-it-possible-to-put-just-a-rails-form-element-in-a-partial