Ok so I'm using the acts_as_votable gem to allow users to add/remove books from a collection. I would like for the add/remove buttons to work without reloading the page but cannot find anywhere implementing the button this way, just using it as a vote counter. I don't care to count votes, just add/remove. My assumption is I would have to add fave.js.erb and unfave.js.erb with appropriate javascript code, but what exactly? Thanks in advance!
Here are the actions from the controller:
def fave
@book = Book.find(params[:id])
current_user.likes @book
respond_to do |format|
format.html { redirect_to :back }
format.json
format.js
end
end
def unfave
@book = Book.find(params[:id])
current_user.dislikes @book
respond_to do |format|
format.html { redirect_to :back }
format.json
format.js
end
end
And the routes.rb
resources :books do
get "book/:page", :action => :index, :on => :collection
member do
post "fave", to: "books#fave"
post "unfave", to: "books#unfave"
end
end
Then from the view they are called like so:
<% if user_signed_in? %>
<ul class="list-inline text-center">
<% if current_user.voted_up_for? @book %>
<li><%= button_to unfave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-danger", title: "Remove from Collection", data: {disable_with: "<span class='glyphicon glyphicon-minus'></span> Removing..."} do %>
<span class="glyphicon glyphicon-heart-empty"></span> Remove from Collection
<% end %>
</li>
<% else %>
<li><%= button_to fave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-success", title: "Add to Collection", data: {disable_with: "<span class='glyphicon glyphicon-plus'></span> Adding..."} do %>
<span class="glyphicon glyphicon-heart"></span> Add to Collection
<% end %>
</li>
<% end %>
If I understand what you're trying to do correctly, I would show and hide the buttons based on the user's voting status. And then show/hide them when the user adds/removes them.
<ul class="list-inline text-center">
<li data-book-id="<%= @book.id %>">
<%= button_to unfave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-danger unfave #{'hidden' unless current_user.voted_up_for?(@book)}", title: "Remove from Collection", data: {disable_with: "<span class='glyphicon glyphicon-minus'></span> Removing..."} do %>
<span class="glyphicon glyphicon-heart-empty"></span> Remove from Collection
<% end %>
<%= button_to fave_book_path(@book, method: :put, remote: true), class: "btn btn-default btn-success fave #{'hidden' if current_user.voted_up_for?(@book)}", title: "Add to Collection", data: {disable_with: "<span class='glyphicon glyphicon-plus'></span> Adding..."} do %>
<span class="glyphicon glyphicon-heart"></span> Add to Collection
<% end %>
</li>
</ul>
I'm also assuming that you might have multiple li
s for different books.
in the fave.js.erb , you could do:
var $li = $("li[data-book-id='<%= @book.id %>']");
$li.find('button.unfave').show();
$li.find('button.fave').hide();
And in unfave.js.erb , you could do:
var $li = $("li[data-book-id='<%= @book.id %>']");
$li.find('button.fave').show();
$li.find('button.unfave').hide();
If you really want to keep your template the way it is, you could just re-render the partial:
$('ul.list-inline').html("<%= j render 'path/to/a/partial', book: @book %>");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.