Rails update has_many through jQuery Draggable Droppable and hidden_field_tag
I am making a screen where people "vote" for each other's favorite imag开发者_如何学Goes by dragging them from a gallery into a tray. I am using jQuery for the draggable / droppable. When the user drags an image from the gallery to the tray, I want to update my has_many :through relationship in the database (the vacation votes). I am trying to use hidden_field_tag to hold the votes.
I am not getting parameters passed when the form submits. Anyone have an idea on how to do this? Thanks in advance!
The Models
Vacation
class Vacation < ActiveRecord::Base
belongs_to :user
belongs_to :period
has_many :votes
has_many :images, :through => :votes
accepts_nested_attributes_for :votes
attr_accessible :user_id, :period_id, :name
end
Vote
class Vote < ActiveRecord::Base
belongs_to :vacation
belongs_to :image
attr_accessible :image_id, :vacation_id
end
Image
class Image < ActiveRecord::Base
belongs_to :user
belongs_to :category
has_many :votes
has_many :vacations, :through => :votes
attr_accessible :user_id, :title, :facebook_id, :image
validates_presence_of :user_id;
validates_presence_of :title;
validates_presence_of :image;
validates_length_of :title, :maximum => 255
mount_uploader :image, ImageUploader
end
The Javascript
var $gallery = $( "#gallery" ),
$tray = $( "#tray_images" );
$( "li", $gallery ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
cursor: "move",
helper: "clone"
});
$tray.droppable({
accept: "#gallery > li",
drop: function( event, ui ) {
moveImageToTray( ui.draggable );
$( "#update_vacation" ).submit();
}
});
function moveImageToTray( $item ) {
$item.fadeOut(function() {
$tray.append($item);
$item.fadeIn();
});
}
The View /vacations/show.html.erb
<%= form_for @vacation, :html => { :method => :put, :id => "update_vacation" } do |f| %>
<%= hidden_field_tag :user_id, @vacation.user_id %>
<%= hidden_field_tag :period_id, @vacation.period_id %>
<%= hidden_field_tag :name, @vacation.name %>
<div id="tray" class="grid_19 push_1 alpha">
<ul id="tray_images" class="gallery">
<% @votes.each do |vote| %>
<li class="grid_3 image">
<% link_to @images_all[i] do %>
<% content_tag :div do %>
<%= image_tag @images_all[i].image_url(:thumb_100_100) %>
<%= hidden_field_tag "vacation[][image_ids]", vote.image_id %>
<% end %>
<% end %>
</li>
<% end %>
</ul>
</div>
<% end %>
<div class="clear"></div>
<div class="grid_24">
<ul id="gallery" class="grid_19 push_1 alpha gallery">
<% @images_all.each do |image| %>
<li class="grid_3 image">
<% link_to image do %>
<% content_tag :div do %>
<%= image_tag image.image_url(:thumb_100_100) %>
<%= hidden_field_tag "vacation[image_ids][]", image.id %>
<% end %>
<% end %>
</li>
<% end %>
<% end %>
</ul>
The Controller
def update
params[:vacation][:votes] ||= []
break
@vacation = Vacation.find(params[:id])
if @vacation.update_attributes(params[:vacation])
redirect_to @vacation, :notice => "Successfully updated vacation."
else
render :action => 'edit'
end
end
If you want to have params from the form in params[:vacation] hash use:
<%= f.hidden_field :field %>
instead of
<%= hidden_field_tag :field %>
Also you might consider sending data asynchronously instead of submitting the form after every drag&drop.
精彩评论