Ajaxは反復処理によって生成されたDOM要素のIDにどのようにアクセスできますか？

Question

私はBookモデルを持っており、私の図書館には書籍のリストを表示するページがあります。 すべての書籍を表示するには、@books = Book.allを繰り返し、結果を表の中にリストし、ユーザーに書籍の予約や返品の機会を提供します。各書籍の

<% @books.each_with_index do |book, index| %> 
    <tr id="book-<%= book.isbn %>"> 
    <td class="title"> <%= book.title %> </td> 
    <td class="author"> <%= book.author %> </td> 
    <td> 
     <div id="booking_form_<%= index + 1 %>"> 
     <% if current_user.booked?(book) %> 
      <%= render 'book_selections/return_book' %> 
     <% else %> 
      <%= render 'book_selections/book_book' %> 
     <% end %> 
     </div> 
    </td> 
    </tr> 
<% end %> 

、予約フォームのユニークなidは、反復のindexによって生成されます。
Ajaxを使用して、Webページがページを離れずにサーバーに非同期でリクエストを送信できるようにする方法をユーザーに提案したいと考えています。 したがって、ユーザーは、アプリケーションがそのページにリダイレクトするためのページをリフレッシュする必要なく、フォームを送信した結果を見ることができます。
問題は、フォームのidへのアクセス権がありません。indexという変数がjs.erbファイルで使用できないためです。 次のコードは動作しません：私は、インデックス変数を保存し、js.erbファイル内で使用できるようにする方法を探しています

app/views/book_selections/create.js.erb 

$("#booking_form_<%= index + 1 %>").html("<%= escape_javascript(render('book_selections/return_book')) %>"); 
$("#books_count").html('<%= current_user.books.count %>'); 

。

Answer 1

indexの代わりにidを使用すると便利です。

<% @books.each do |book| %> 
    <tr id="book-<%= book.isbn %>"> 
    <td class="title"> <%= book.title %> </td> 
    <td class="author"> <%= book.author %> </td> 
    <td> 
     <div id="booking_form_<%= book.id %>"> 
     <% if current_user.booked?(book) %> 
      <%= render 'book_selections/return_book' %> 
     <% else %> 
      <%= render 'book_selections/book_book' %> 
     <% end %> 
     </div> 
    </td> 
    </tr> 
<% end %> 

あなたのAJAXコールでは、boook.idを引数として渡します。

あなたはfolowingsを行うことができます。

# @book is the instance variable you would define in your controller action 
# example: @book = Book.find_by_id(params[:id]) 
# params[:id] is the book id you would have sent as an argument 
$("#booking_form_<%= @book.id %>").html("<%= escape_javascript(render('book_selections/return_book')) %>");