jqueryとajaxを使用してレールで1つのdivを更新する

Question

ユーザーがボタンをクリックしてリストに項目を追加できるようにしようとしています。ページ全体を再度ロードするのではなく、リストをリフレッシュするだけです。今の時点で追加ボタンをクリックしたときに、ADD_ITEMメソッドがlists_controllerに呼び出されます。

lists_controller.rb：

def add_item 
    @product = Product.find(params[:product_id]) 
    @list = params[:list] 

    if @list.nil? 
     @list = [] 
    end 

    @list.append @product.name 
    session[:active_list] = @list 

    respond_to do |format| 
     format.js 
    end 
    end 

正しい製品タイトルが@list配列に追加されます。リストを含むdiv要素で

（＃リスト-コンテナ）私が持っている：ボタンがクリックされたときに、私は次のように使用しています

<div class="col-md-3" id="list-container"> 
    <h3>List:</h3> 
    <ol> 
     <% @list.each do |item| %> 
     <li><%= item %></li> 
     <% end %> 
    </ol> 
    <%= button_to 'Add to List', { controller: "lists", action: "add_item", params: { product_id: product.id, list: @list } }, remote: true, class: 'btn btn-primary add-item-btn' %> 

を

add_item.js.erb

// Clear active status from pressed button 
$(".add-item-btn").blur() 
$('#list-container').load('/my_controller/home #list-container') 

divを更新します。

をクリックすると、何も起こりません。リストに項目が追加されず、ページは変更されません。ページを更新すると、アイテムがリストに追加されたことがわかります。

ページが読み込まれたときに最後のアイテムの下にあるチェックアウトボタンがあるので、divに単に追加することはできません。追加すると、将来のすべてのアイテムがこのボタンの下に追加されます。

divをレンダリングする方法はありますか？

EDIT1：

が、私は404エラーを得ていたが判明。私は 'my_controller/home'を削除しました。これはroot_pathなので、ホームページ全体を＃list-container divにロードしようとしました。

私はロード機能にIDを追加しようとした

：

$('#list-container').load('#list-container') 

私はボタンをクリックしたときに、私はまだ全体のホームページがdiv要素内にレンダリングされます。

EDIT2：

[OK]をクリックします。私は前に私のroutes.rbをファイルにルーティングされたGET要求を持っていなかったと私は今使用することができます。

$('#list-container').load('/my_controller/home #list-container') 

唯一の難点は今、divの中にいたすべてのものがなくなって、全体の事は空白になっています。私はそれを引き起こしているか分からない。

EDIT3：

私はほとんどそれを得ました。私は＃リスト-容器にdiv.listを入れ子にしてにjqueryのを変更：

$('#list-container').load('/static_pages/home #list-container .list') 

私は、リストに項目を追加するボタンをクリックすると今、項目が追加されます。しかし、ハングアップがあります。別の項目を追加しようとすると、2番目のクリックが最初の項目を上書きします。たとえば、最初にページをロードしたときに7つのアイテムがある場合、アイテム8を追加できますが、その時点でアイテム8のみを変更できます。

ページをリフレッシュしてアイテム8を保存するまで対応するコントローラの対応するアクションからアイテム9を追加することができます。

Answer 1

render add_item.js.erb

respond_to do |format| 
format.js { 
render 'add_item.js.erb' 
    } 
end 

また、代わりにコントローラをイムformat.jsへの対応を追加するので、私は通常のようにroutes.rbを直接そのを追加します。

get 'ajax/:model', to: 'ajax#:model', :defaults => { :format => 'json' } 

第三に、私は、任意のリモートが表示されません：真、どこに？