在 ruby​​ rails html 视图中使用 Ajax 表单更改图标“like”按钮类

Posted 2023-05-09

【中文标题】在 ruby​​ rails html 视图中使用 Ajax 表单更改图标“like”按钮类

【英文标题】：Change icon "like" button class with Ajax form in ruby rails html view

【发布时间】：2020-04-19 18:48:25

【问题描述】：

我正在努力让我的页面在 Ajax 功能成功后更新图标。数据已成功发布到数据库，但我仍然需要刷新页面才能更新内容。我想更改图标（通过更改样式或类）并在不刷新页面的情况下显示新图标。

这是我的控制器：

class VotesController < ApplicationController
  def create
    @vote = Vote.new
    @vote.voter_id = session[:user_id]
    @vote.post_id = params.fetch("post_id_from_query")
    @vote.bestoutfit_id = params.fetch("bestoutfit_id_from_query")

    if @vote.post_id == nil
      redirect_to("/feed",  :notice => "Vote failed to create successfully." )
    else
      @vote.save
      redirect_to( :template => "/feed" )
    end
  end
end

我的 ajax 函数如下所示：

<script>

  $(function()
  $(".post-form").on('click', function(event)
    $.ajax(
      type: "POST",
      url: this.action,
      data: $(this).serialize(),
      success: function(response) 
        $('i').removeClass('far fa-heart').addClass('fas fa-heart');
      
    );
    event.preventDefault();
  );
)

</script>

我的 html 代码如下所示：

<form action="/insert_vote" method="post" class="post-form" data-remote="true">
<input type="hidden" value="<%= post.id %>" name="post_id_from_query">
<input type="hidden" value="<%= post.outfit1_id %>" name="bestoutfit_id_from_query">     
<button class="button"> 
<div class="arrow-left">
<p> <i class="far fa-heart"></i></p>
</div> 
</button>
</form>

我也遇到了这个错误：

VM268:1 Uncaught ReferenceError: Turbolinks is not defined
    at <anonymous>:1:1
    at b (jquery.min.js:2)
    at Function.globalEval (jquery.min.js:2)
    at text script (jquery.min.js:2)
    at jquery.min.js:2
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

提前感谢您的帮助！

【问题讨论】：

你可以使用它的类选择器而不是i。 $('.fa-heart').removeClass('far').addClass('fas');

【参考方案1】：

在 application.js 中，您是否需要 jquery 和 turbolinks 之间的 jquery.turbolinks，如下所示？

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree 

如果您的 turbolinks 版本是 5，jquery-turbolinks gem 不支持 turbolinks 5。因此，目前，您必须添加 JS 以实现兼容性，参考此 issue（请参阅 Lowryderch 的评论）。将 turbolinks-compatibility.coffee 放在 app/assets/javascripts/ 文件夹下

如果一切正确。

在你看来

<span id="heart_div"> <i class="far fa-heart"></i></span>

在你的 JS Success 函数中

$('#heart_div').html('<i class="fas fa-heart"></i>')

【讨论】：

它实际上并不是主要问题。相反，我在应用程序控制器中呈现了部分视图。 turbolinks 错误似乎是我设置 Javascript 文件的方式以及视图文件中的 javascript 调用标记的问题。