I'm trying to get the gem acts as votable to work without having to page refresh.
I do have the acts as votable gem working with the page refresh without AJAX.
I'm following the steps on this blog by Superails.
I feel the main difference between his setup and mine is that I have a partial nested within a partial.
My index.html.erb for my events model where I'm rendering my first partial:
<div class="event-list-wrapper">
<% @events.upcoming_events.each do |event| %>
<%= render 'event', event: event %>
<% end %>
</div>
I have my initial _event.html.erb partial:
<div class="card shadow rounded mb-3">
<div class="top-card">
<div class="card-image">
<% if event.event_image.attached? %>
<%= link_to image_tag(event.event_image, class: "card-img-top event-index-image").html_safe, event %>
<% else %>
<img src=<%= "https://dancewise.s3.amazonaws.com/Blank+Event+Image.png" %> class=" card-img-top even-size-event">
<% end %>
</div>
<div class="heart-container">
<%= render "events/favorite-link", event: event %>
</div>
</div>
And then my _favorite-link.html.erb partial:
<%= content_tag "div", id: "upvote-#{event.id}" do %>
<%= link_to upvote_event_path(event), method: :get, remote: true do %>
<% if current_user.voted_up_on? event %>
<%= link_to upvote_event_path(event), method: :patch do %>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#ff2929"
stroke-width="1.2"
stroke="#f2f2f2"
class="w-6 h-6">
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
<% end %>
<% else %>
<%= link_to upvote_event_path(event), method: :patch do %>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
fill-opacity="0.5"
viewBox="0 0 24 24"
data-user-logged-in="<%= user_signed_in? %>"
stroke-width="1.2"
stroke="#f2f2f2"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
</svg>
<% end %>
<% end %>
<% end %>
<% end %>
I also have my favorite.js.erb file:
document.getElementById("upvote-<%= @event.id %>").innerHTML = "<%= j render "events/favorite-link", event: event %>";
And my events_controller.rb:
def upvote
if current_user.voted_up_on? @event
@event.unvote_by current_user
else
@event.upvote_by current_user
end
render "favorite.js.erb"
end
I tried playing around with the path in the events_controller as even tried copying the favorite.js.erb to a different path indicated to the error but still getting the same error.
/Users/ogarocious/Desktop/RubyWorld/wherecanwedance-dw/app/views/favorite.js.erb
/Users/ogarocious/Desktop/RubyWorld/wherecanwedance-dw/app/views/events/favorite.js.erb
01:58:49 web.1 | Completed 500 Internal Server Error in 24ms (ActiveRecord: 4.5ms | Allocations: 10048)
01:58:49 web.1 |
01:58:49 web.1 |
01:58:49 web.1 |
01:58:49 web.1 | ActionView::MissingTemplate (Missing template events/favorite.js.erb, application/favorite.js.erb with {:locale=>[:en], :formats=>[:html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :jbuilder]}.
01:58:49 web.1 |
01:58:49 web.1 | Searched in:
01:58:49 web.1 | * "/Users/ogarocious/Desktop/RubyWorld/wherecanwedance-dw/app/views"
01:58:49 web.1 | * "/Users/ogarocious/.rvm/gems/ruby-3.0.2/gems/devise-4.8.1/app/views"
01:58:49 web.1 | * "/Users/ogarocious/.rvm/gems/ruby-3.0.2/gems/actiontext-7.0.4/app/views"
01:58:49 web.1 | * "/Users/ogarocious/.rvm/gems/ruby-3.0.2/gems/actionmailbox-7.0.4/app/views"
01:58:49 web.1 |
01:58:49 web.1 |
01:58:49 web.1 |
01:58:49 web.1 | app/controllers/events_controller.rb:19:in `upvote'
My routes.rb:
resources :events do
member do
get "upvote", to: "events#upvote"
end
I'm not sure what else I could be missing, but I feel the partial within a partial is causing the issue and I need to modify the path to the favorite.js.erb file in the events controller somehow, anything insight is appreciated!
In Rails 7 we don't use .js.erb any more. We use hotwire instead. Here's an updated guide with adding likes/favorites with hotwires' format.turbo_stream: https://blog.corsego.com/acts-as-votable-4-hotwire
Also here you can find a simple guide to increasting like_count: https://blog.corsego.com/hotwire-turbo-button-to-like-record
I hope it helps!