Want to refresh only favorite and not the entire page - ruby-on-rails

Question

Hi there it's the third I ask you to help me on this point.
I don't know how to explain it because I read some tutorials or answers but I don't understand what can I do.
Ok I am working on an app to learn Japanese language with hiragana flashcards.
I created a feature to add a card as a favorite. When I click on a grey color heart, the heart becomes in red color and it saves in an index favs page.
The problem is when I click to add as favorite the full page is loaded and I don't want it. I just wnat have the heart object which changes of state.
I would use ajax and javascript but I don't know what can I call and which is the syntax. I have ever read http://guides.rubyonrails.org/working_with_javascript_in_rails.html
And Try to do the same but it doesn't work.
here is the favs controller
class FavsController < ApplicationController
def index
#favs = Fav.where(user: current_user)
end
def create
#hiragana = Hiragana.find(params[:hiragana_id])
#fav = current_user.favs.new(hiragana: #hiragana)
if not #hiragana.favs.where(user: current_user).take
#fav.save
end
# redirect_to favs_path
# redirect_to :back
render json: #fav
end
def destroy
#fav = Fav.find(params[:id])
#fav.destroy
redirect_to :back
end
end
Above I choose to redirect as a json format but now
here is the render favorite view
<% if current_user %>
<div class="hiragana-fav">
<% if hiragana.is_faved_by(current_user) %>
<%= link_to fav_path(hiragana.is_faved_by(current_user)), method: :delete do %>
<i class="fa fa-heart faved faved-on"></i>
<% end %>
<% else %>
<%= link_to hiragana_favs_path(hiragana), method: :post do %>
<i class="fa fa-heart faved faved-off"></i>
<% end %>
<% end %>
</div>
<% end %>
and the index hiraganas view where the favs render is located
<div class="row">
<ul class="list-inline text-center card-frame">
<li>
<div class="card">
<div class="front">
<% if current_user.try(:admin?) %>
<%= link_to hiragana_path(hiragana), class:'trash-hiragana', data: { confirm: 'Are you sure?' }, method: :delete do %>
<%= image_tag("delete-btn.png") %>
<% end %>
<% end %>
<span class="card-question img-popover" data-content="<h4 class='text-center letter-uppercase'><%= hiragana.bigletter.upcase %></h4><p class='text-center'><b><%= hiragana.midletter %></b> comme dans <b><%= hiragana.transcription %></b></p>">
<i class="fa fa-eye fa-lg"></i>
</span>
<div class="card-hiragana hiragana-<%=hiragana.bigletter.downcase.last%>">
<h1><b><%= hiragana.ideo1 %></b></h1>
</div>
<div class="card-katakana">
<p><%= hiragana.ideo2 %></p>
</div>
<%= render 'favs/favorites', hiragana: hiragana %>
</div>
<div class="back">
<div class="col-sm-3 col-xs-4 col-md-3 containerbackcards-<%=hiragana.bigletter.downcase.last%>">
<div class="backcard-hiragana">
<h1><b><%= hiragana.ideo1 %></b></h1>
</div>
<div class="card-bigletter">
<h4><%= hiragana.bigletter.upcase %></h4>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
I try to call it with this javascript code but i don't where I can place it and how do I have to call the file .js.erb? (I put it in application.js for now but it doesn't communicate with the rest of my code)
application.js
$(document).ready(function() {
$('.faved-on').click(function() {
var fav = $('.faved-off')
$.ajax({
type: "POST",
url: "/hiraganas",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(jqXHR) {
console.error(jqXHR.responseText);
}
});
})
})
Help will be appreciated :).

Answer 1

Have you tried this: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#link-to ?
There is a simple "remote: true" to add inside your link_to code. Something like that:
<%= link_to hiragana_favs_path(hiragana), class: "add-to-favorite", method: :post, remote: true do %>
<i class="fa fa-heart faved faved-off"></i>
<% end %>
Then to perform some special actions in your Coffee (JS), you could do:
$ ->
$("a.add-to-favorite").on "ajax:success", (e, data, status, xhr) ->
console.log(data)
alert "Favorite added."
And you can do the same thing for the other link_to (the :delete one).
Also I would rather use "button_to" instead of "link_to method: :post" as you did, as "link_to" should not really be used to POST data. Button_to is a simple helper that works like link_to but is replaced by a form, which is better to post data. :)
Of course you don't have to, but it'd be better this way. :)
Let me know if it worked. If not, add comments and edit your question to add more info, I'll try to help you more by editing my answer and adding more info.