Хотите обновить только фаворитную, а не всю страницу.

Question

Привет, я третья, прошу вас помочь мне в этом вопросе. Я не знаю, как объяснить это, потому что я прочитал несколько уроков или ответов, но я не понимаю, что я могу сделать. Хорошо, я работаю над приложением, чтобы изучать японский язык с карточками hiragana. Я создал функцию, чтобы добавить карту в качестве фаворита. Когда я нажимаю на сердце с серым цветом, сердце становится красным, и оно сохраняется на странице индекса favs.

Проблема в том, когда я нажимаю, чтобы добавить в качестве фаворита полную страницу, и я не хочу ее. У меня просто есть объект сердца, который изменяет состояние.

Я бы использовал ajax и javascript, но я не знаю, что я могу назвать и который является синтаксисом. Я когда-либо читал http://guides.rubyonrails.org/working_with_javascript_in_rails.html И попробуйте сделать то же самое, но он не работает.

здесь контроллер Favs

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 

Выше я выбираю для перенаправления в формате JSON, но теперь

здесь рендер любимого вида

<% 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 %> 

и индекс hiraganas посмотреть, где выдается favs render

<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> 

Я пытаюсь назвать это с помощью этого кода javascript, но я не могу разместить его и как мне позвонить в файл .js.erb? (Я положил его в application.js сейчас, но он не общается с остальной частью моего кода)

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); 
     } 
    }); 
    }) 
}) 

Помощь будет оценена :).

Answer 1

Вы пытались: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#link-to?

Существует простой «remote: true» для добавления внутри вашего кода link_to. Нечто подобное:

<%= 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 %> 

Затем выполнить некоторые действия в вашем кофе (JS), вы можете сделать:

$ -> 
    $("a.add-to-favorite").on "ajax:success", (e, data, status, xhr) -> 
    console.log(data) 
    alert "Favorite added." 

И вы можете сделать то же самое для другого link_to (: удаление один).

Также я бы предпочел использовать «button_to» вместо «link_to method:: post», как вы это делали, поскольку «link_to» не должно действительно использоваться для данных POST. Button_to - это простой помощник, который работает как link_to, но заменяется формой, которая лучше размещать данные. :)

Конечно, вам не обязательно, но было бы лучше. :)

Сообщите мне, если это сработает. Если нет, добавьте комментарии и отредактируйте свой вопрос, чтобы добавить дополнительную информацию, я постараюсь вам помочь, отредактировав свой ответ и добавив дополнительную информацию.