Rails 通过 jQuery Draggable Droppable 和 hide_field_tag 更新 has_many
我正在制作一个屏幕,人们可以通过将图像从图库拖到托盘中来“投票”彼此最喜欢的图像。我使用 jQuery 来实现可拖动/可放置。当用户将图像从图库拖到托盘时,我想更新我的 has_many :through 数据库中的关系(假期投票)。我正在尝试使用hidden_field_tag来保存选票。
提交表单时我没有收到传递的参数。有人知道如何做到这一点吗?提前致谢!
模型
假期
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
投票
class Vote < ActiveRecord::Base
belongs_to :vacation
belongs_to :image
attr_accessible :image_id, :vacation_id
end
图像
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
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();
});
}
视图 /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>
控制器
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
I am making a screen where people "vote" for each other's favorite images 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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您想在 params[:vacation] 哈希中使用表单中的参数:
而不是
另外,您可以考虑异步发送数据,而不是在每次拖放后提交表单。
If you want to have params from the form in params[:vacation] hash use:
instead of
Also you might consider sending data asynchronously instead of submitting the form after every drag&drop.