jQuery ( ) を使用して Rails 3.2 のドラッグ アンド ドロップ ショッピング カートを実装しようとしています$.ajax
。
問題:line_items
JavaScript でコントローラーに:product_id
オプション
を渡す方法がわかりません。私は Ajax が鍵であると信じているので、それが今私の頭の中にあるところです。button_to
現在、これは次のように埋め込みルビを使用して HTML で簡単に実行できます。
(<%= button_to('Add to Cart', line_items_path(:product_id => product), :remote => true) %>)
ただし、ドラッグ/ドロップ機能を実装するには、上記のアクションを でトリガーする必要がありますdrop
。これは JavaScript でどのように行うことができますか?
私のコントローラー:
# POST /line_items
# POST /line_items.json
def create
@cart = current_cart
product = Product.find(params[:product_id])
@line_item = @cart.add_product(product.id)
respond_to do |format|
if @line_item.save
format.html { redirect_to(store_index_url) }
format.js { @current_item = @line_item }
format.json { render json: @line_item, status: :created, :location => @line_item }
else
format.html { render :action => "new" }
format.json { render json: @line_item.errors, status: :unprocessable_entity }
end
end
end
私のHTML:
<% @products.each do |product| %>
<div class="entry" data-id="<%= product.id %>">
<h3><%= product.title %> </h3>
<%= image_tag(product.image_url)%>
<div style="display: none; width: 10px"><%= sanitize(product.description) %> </div>
<div class="price_line">
<span class="price"><%= number_to_currency(product.price) %></span>(<%= product.unit_of_measure%>)
<br>
<%= button_to('Add to Cart', line_items_path(:product_id => product), :remote => true) %>
</div>
</div>
<p>
<% end %>
私のJavascript:
$(document).ready(function(){
//End Navigation Buttons
var dragDrop;
$('.entry').draggable({
revert: true ,
revertDuration: 500,
containment: "document",
zIndex: 100,
helper: "clone",
start: function(){
dragDrop = $(this).data('id');
}
});
$('#cart').droppable({
accept: '.entry',
activeClass: 'active',
hoverClass: 'hovered',
drop: function( event, ui ){
$.post({
url: "<%= escape_javascript(line_items_path(:product_id => product)) %>"
});
}
});
...
:product_id
これまでのところ、に渡されないことを除いて、ドラッグは機能し、ドロップは機能しline_items
ます。ERROR bad URI '/store/[object Object]'.
アイテムをドロップすると、コマンド コンソールが表示されます。