Question

大家好，我要求你帮我解决这个问题。我不知道如何解释它，因为我阅读了一些教程或答案，但我不明白我能做些什么。好的我正在开发一个应用程序，用平假名闪卡来学习日语。我创建了一个功能，将卡添加为收藏夹。当我点击灰色的心脏时，心脏变成红色，并保存在索引页面中。

问题是，当我点击添加为收藏时，整页都已加载，我不想要它。我只是知道状态发生变化的心脏对象。

我会使用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呈现的位置

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

在link_to代码中添加一个简单的“remote：true”。这样的事情：

<%= 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类似，但由表单替换，最好发布数据。：）

当然你没必要，但这样做会更好。：）

让我知道它是否有效。如果没有，请添加评论并编辑您的问题以添加更多信息，我会尝试通过编辑我的答案并添加更多信息来帮助您。

想要仅刷新收藏夹而不是整个页面

1 个答案: