Question

我正在制作平假名卡片应用程序。我花了几天时间来了解当我添加闪卡（平假名）作为最爱时如何不刷新整页。

这是最喜欢的控制器

类FavsController＆lt; 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
    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 %>

它位于平假名渲染

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

当我添加一张卡作为收藏时，它给我一个像这样的哈希：

{
id: 64,
user_id: 1,
hiragana_id: 4,
created_at: "2016-02-10T16:37:26.270Z",
updated_at: "2016-02-10T16:37:26.270Z"
}

我只想让心脏灰红色为最爱，保存并不刷新整个页面。感谢您的解释。

Answer 1

为了在不刷新页面的情况下将请求发送到控制器，您需要使用Ajax和JavaScript的组合。

使用JavaScript将点击侦听器添加到.faved-on按钮并触发Ajax请求。您还将使用JavaScript来防止单击链接时发生的默认操作，即。页面刷新

然后使用Ajax将请求发送到控制器并处理响应。

您的初始JavaScript代码看起来非常正确，除非您错过了阻止页面重新加载的位。

请参阅下面的e.preventDefault();行

$(document).ready(function() { 
 $('.faved-on').click(function(e) { //make sure to pass in the e (the event paramter)
 e.preventDefault(); //this is the line you are missing
 var fav = $('.faved-off')
//let your ajax handle the rest then
 $.ajax({
         type: "POST", url: "/hiraganas", dataType: "json", 
         success: function(data) {
         console.log(data); 
         //change the color of your heart to red here
 }, 
 error: function(jqXHR) {
    console.error(jqXHR.responseText);
    }
   }); 
   })
 })

我没有测试过您的JavaScript，但它看起来非常接近正确，我相信它是您遗漏的e.preventDefault();位

添加为收藏，没有整页刷新

1 个答案: