开发者

Rails update has_many through jQuery Draggable Droppable and hidden_field_tag

开发者 https://www.devze.com 2023-03-16 21:26 出处:网络
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

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号