javascript - Rails association form with Ajax update -

i have model, book, has_many association, owns. have set user can click button add book collection. controller looks such:

def create     @book.owns.where(user_id: current_user.id).first_or_create     @own = own.where(user_id: current_user.id, book_id: @book.id)     own.update(@own, :quantity => "1")     respond_to |format|         format.html { redirect_to @book}         format.js     end end 

the view looks such:

<% if user_signed_in? && current_user.owns?(@book) %>     <%= link_to book_own_path(@book), method: :delete, remote: true, class: "btn btn-danger btn-circle", title: "remove collection", data: { toggle: "tooltip", disable_with: "<span class='fa fa-minus'></span>"} %><span class="fa fa-heart-o"></span><% end %> <% else %>     <%= link_to book_own_path(@book), method: :post, remote: true, class: "btn btn-success btn-circle", title: "add collection", data: { toggle: "tooltip", disable_with: "<span class='fa fa-plus'></span>"} %><span class="fa fa-heart"></span><% end %> <% end %> 

so when button clicked, automatically adds quantity of 1 inventory. want have user able update owned quantity book show view added this:

<% if user_signed_in? && current_user.owns?(@book) %>     <span id="<%= @book.id %>_quantity">         <% own.where(:user_id => current_user.id, :book_id => @book.id).each |z| %>         <% if z.quantity == 1 %>             <form>                 own <input type="text" placeholder="<%= z.quantity %>" id="quantity" name="quantity" size="1" class="text-center" /> copies of book                 <input type="submit" onclick="<% own.update(@own, :quantity => params[:quantity]) %>.submit();" hidden />             <form>         <% else %>             <form>                 own <input type="text" placeholder="<%= z.quantity %>" id="quantity" name="quantity" size="1" class="text-center" /> copies of book                 <input type="submit" onclick="<% own.update(@own, :quantity => params[:quantity]) %>.submit();" hidden />             <form>         <% end %>     <% end %>     <br />     </span> <% end %> 

the above update own quantity when click enter, redirects me same url ?quantity=1 (or whatever quantity value is) added end. not show quantity in input placeholder unless page refreshed.

my question is, there better way go this, or there way show placeholder value. also, how set form submitted in background instead of refreshing page?

to build form in rails, should use rails gives : rails doc form helpers

or gems likes simpleform

this example assume using rails 4+.

first, want display book page, load book , load owns (when manipulates models better in controller) :

# books controller def show   @book = book.find(params[:id])   @owns = current_user.owns.where(book: @book) end 

and view, :

# book show <% @owns.each |own| %>   <div> own <span class="<%= own.id %>_quantity"><%= own.quantity %></span> of book </div>   <%= form_for own, remote: true, method: :put |f| %>     <%= f.hidden_field :quantity, value: own.quantity + 1 %>     <%= f.submit "add one" %>   <% end %>   <hr> <% end %> 

we iterate through our owns , create form add 1 quantity. request go own#update because of put method on form. form send via ajax because of attribute "remote: true" (this 1 of rails ways use ajax in form : rails doc ajax ).

# own controller def update   @own = own.find(params[:id])   respond_to |format|     if @own.update(own_params)       format.html         redirect_to book_path(@own.book), notice: 'success'       end       format.js     else       format.html         redirect_to book_path(@own.book), alert: 'fail'       end     end   end   end  def own_params   params.require(:own).permit(:quantity) end 

here, load our own , try update it. if js disabled, request take html part , redirect want. if js enabled, can create "js view", rendered html 1 (you have name them after name of action). so, :

# views/owns/update.js.erb $(".<%= @own.id %>_quantity").html("<%= @own.quantity %>"); 

it replace content of span new quantity.

i haven't tested it, @ end, code this