599px以下の画面でのみ、いいねの非同期が反映されない

Question

前提・実現したいこと

いいね機能を非同期で実装しています。
599px以上の画面サイズでは非同期で正常に反映されるのですが、
599pxより小さな画面サイズにすると、リロードしないと反映がされません。
また、リロードするまでいいねボタンを押した数だけ、いいね数がカウントされてしまいます。

すべての画面ではなく、599pxより小さな画面のみ実装ができない理由がわかりません。
原因と解決方法を教えていただけると幸いです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

class LikesController < ApplicationController
  before_action :set_event


  def create
    like = current_user.likes.build(event_id: params[:event_id])
    like.save
  end

  def destroy
    like = Like.find_by(event_id: params[:event_id], user_id: current_user.id)
    like.destroy
  end


  private

  def set_event
    @event = Event.find(params[:event_id])
    @id_name = "#like-link-#{@event.id}"
  end

end

<div class="event-category">

  <%= render "shared/sidebar"%>

  <div class= "language-img">
    <div class= "main-events">
      <% @events.where("purpose_id = 1").each do |event| %>
      <% @event = event %>
      <ul class= "events-list">
        <li class= "lists">
          <%=link_to event_path(event.id) do %>
            <div class= "list-name">
              <%= event.name %>
            </div>
            <div class= "list-time">
              <%= event.month.name %> <%= event.day.name %>th  <%= event.year.name %>
            </div>
          <% end %>
          <div class="like">
            <%=render partial: "likes/like", event: event %>
          </div>
        </li>
      </ul>
      <% end %>
    </div>
    <div class= "category-name">LANGUAGE</div>
  </div>
  

  <div class= "main-hide">
    <div class= "main-events">
      <% @events.where("purpose_id = 1").each do |event| %>
      <% @event = event %>
      <ul class= "events-list">
        <li class= "lists">
          <%=link_to event_path(event.id) do %>
            <div class= "list-name">
              <%= event.name %>
            </div>
            <div class= "list-time">
              <%= event.month.name %> <%= event.day.name %>th  <%= event.year.name %>
            </div>
          <% end %>
          <div class="like">
            <%=render partial: "likes/like", event: event %>
          </div>
        </li>
      </ul>
      <% end %>
    </div>
    <div class= "category-name">LANGUAGE</div>
  </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<% if user_signed_in? && @event.user_id != current_user.id %>
  <div class="like-link" id="like-link-<%= @event.id %>">
    <% if current_user.likes.find_by(event_id: @event.id) %>
      <%= link_to event_likes_path(@event.id), method: :delete, remote: true do %>
        <div class = "iine__button">❤️ <%= @event.likes.count %> people</div>
      <% end %>
    <% else %>
      <%= link_to event_likes_path(@event.id), method: :post, remote: true do %>
        <div class = "iine__button">♡️ <%= @event.likes.count %> people</div>
      <% end %>
    <% end %>
  </div>
<% else %>
  <div class="like-link">
    <%= @event.likes.count %> people
  </div>
<% end %>

class Event < ApplicationRecord
  extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :purpose
  belongs_to_active_hash :year
  belongs_to_active_hash :month
  belongs_to_active_hash :day
  belongs_to_active_hash :day_of_week
  belongs_to_active_hash :event_time

  belongs_to :user
  has_many :likes, dependent: :destroy
  has_one_attached :image


  def liked_by?(user)
    likes.where(user_id: user.id).exists?
  end


  with_options presence: true do
    validates :name, :place, :info, :image
    validates :purpose_id, :year_id, :month_id, :day_id, :day_of_week_id, :event_time_id, numericality: { other_than: 0 }
  end
end

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", event: @event  )) %>');

$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", event: @event  )) %>');

試したこと

コンソールやターミナルでエラーが出ていないか確かめましたが、特にありませんでした。
この記述だけでなく「いいね　非同期　実装」で検索し、記述を変えて実装してみましたが、結果は同じでした。

ちなみに、599px以下のレスポンシブルデザインのみしています。

.event-category{
  width: 100vw;
  background-color: rgba(236, 233, 233, 0.603);
  display: flex;
  position: relative;
}

.language-img {
  height: 100vh;
  width: 100vw;
  background-image: url(https://cdn.pixabay.com/photo/2017/07/31/11/21/people-2557396_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 80px;
}

.culture-img {
  height: 100vh;
  width: 100vw;
  background-image: url(https://cdn.pixabay.com/photo/2019/02/04/00/32/festival-3973776_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 80px;
}

.hangout-img {
  height: 100vh;
  width: 100vw;
  background-image: url(https://cdn.pixabay.com/photo/2016/02/18/22/18/picnic-1208229_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 80px;
}

.others-img {
  height: 100vh;
  width: 100vw;
  background-image: url(https://cdn.pixabay.com/photo/2015/04/24/01/19/young-people-737150_1280.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 80px;
}

.main-events {
  height: 70vh;
  width: 65vw;
  margin-top: 150px;
  font-weight: bolder;
  font-family: fantasy;
  display: flex;
  overflow: scroll;
  flex-flow: row wrap;
}

.events-list {
  margin: 7px;
  height: 180px;
  width: 290px;
}

.lists {
  background: rgba(255, 255, 255, 0.76);
  height: 160px;
  width: 280px;
  box-shadow: 8px 8px 3px #666666cb;
  overflow: scroll;
}

.lists:hover {
  color: white;
  background: #69c3faa1;
}

.list-name {
  font-size: 25px;
  padding: 20px 0 0 20px;
}

.list-time {
  font-size: 20px;
  text-align: right;
  padding-right: 10px;
}

.like {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}

.like-link {
  font-size: 18px;
}

.iine__button {
  size: 10px;
}


.category-name {
  position: absolute;
  color: rgba(252, 248, 248, 0.89);
  font-size: 70px;
  font-weight: bolder;
  font-family: cursive;
  bottom: 5px;
  right: 30px;
}

.main-hide {
  display: none;
}


@media (max-width: 599px) {

  .event-category {
    height: 100vh;
    width: 100vw;
    background-image: url(https://cdn.pixabay.com/photo/2016/03/09/15/13/road-trip-1246530_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .language-img {
    display: none;
  }
  
  .culture-img {
    display: none;
  }
  
  .hangout-img {
    display: none;
  }
  
  .others-img {
    display: none;
  }

  .main-hide {
    display: block;
  }
  
  .main-events {
    height: 70vh;
    width: 45vw;
    margin-top: 150px;
    overflow: scroll;
  }
  
  .events-list {
    margin: 0;
  }
  
  .lists {
    background-color: rgba(255, 255, 255, 0.623);
    height: 130px;
    width: 43vw;
  }
  
  .list-name {
    font-size: 20px;
    padding: 10px 0 0 20px;
  }
  
  .list-time {
    font-size: 17px;
    text-align: right;
    padding-right: 10px;
  }
  
  .like {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
  }


  .category-name {
    font-size: 6vh;
    right: 20px;
  }
}

補足情報（FW/ツールのバージョンなど）

rails 6.0.0
ruby 2.6.5

Comments

[kuma_kuma_]

<% if user_signed_in? && @event.user_id != current_user.id %>
<div class="like-link" id="like-link-<%= @event.id %>">
<% if current_user.likes.find_by(event_id: @event.id) %>
<%= link_to event_likes_path(@event.id), method: :delete, remote: true do %>
<div class = "iine__button">❤️ <%= @event.likes.count %> peopleA</div>
<% end %>
<% else %>
<%= link_to event_likes_path(@event.id), method: :post, remote: true do %>
<div class = "iine__button">♡️ <%= @event.likes.count %> peopleB</div>
<% end %>
<% end %>
</div>
<% else %>
<div class="like-link">
<%= @event.likes.count %> peopleC
</div>
<% end %>

[kuma_kuma_]

上の状態で599px以下のサイズで表示するとどうなるの？

[mbk08]

上記の記述で599px以下のサイズで表示すると、
・リロードしないと反映されない
・ボタンを押した分だけいいねがカウントされる
という状態になります。

599px以上の画面の大きさでは、うまく非同期で反映されています。

[kuma_kuma_]

ちゃんと書いておけばよかったですね。
「people」を「peopleA」「peopleB」「peopleC」と変更したので、どのモードで表示されているか知りたかったのです。
ちなみに「❤️」「♡️」はGood、badはどちらがどっちですか？
あと一度
> @media (max-width: 1599px) {
にして同じ現象が発生するか確認してみて下さい。

[mbk08]

理解不足で申し訳ございません > <

イベント作成した以外のユーザーで、
　ログインしている、いいねしている　→　peopleA
　ログインしている、いいねしていない　→　peopleB
イベントを作成したユーザーまたはログインしていないユーザーに対して　→　peopleC
で表示されています。
これは画面サイズが変わっても同じです。
599px以下になった場合のみ、この初期の表示からリロードするまで切り替わりません。

「❤️」はいいねしている状態（good）、「♡」はいいねしていない状態（bad）です。

@media (max-width: 1599px) では正常に反映されていました。

[kuma_kuma_]

> @media (max-width: 1599px)
では
・リロードしないと反映されない
・ボタンを押した分だけいいねがカウントされる
が発生しなかったという事だよね？

そうしたらその状態で画面の幅を狭めていって
どの程度の幅でその現象がおきるか確認してみて下さい
その現象が起きる場合と起きない場合で画面表示で差があるはずです。
また開発コンソールのログも確認してください。
現象が起きる場合エラーとか発生していませんか？

それが終わったら次はこれで試してみて下さい。
> @media screen and (min-width: 599px) {

[mbk08]

検証したところ、600~1599pxまでは非同期でいいね反映されており、
以下のように、ボタンを押すたびに表示が切り替わってる状態です。
　いいね押す　→　❤️に切り替わる、カウント数が1増える
　もう一度押す　→　♡に切り替わる、カウント数が1減る

ですが、やはり599pxになった瞬間非同期が反映されません。
コンソールを確認しましたがエラーも出ていないです。
599px以下は、レスポンシブルデザインをしているので
CSSは変えていますが、HTMLは変えていません。

> @media screen and (min-width: 599px) {
上記にコードを変えたところ、ビューが崩れどの画面の大きさでも非同期が反映されなくなりました。

[kuma_kuma_]

整理しましょう。まず
> @media (max-width: 1599px)
とした場合
・ 600~1599pxでは特に問題は発生しない
・ 599pxになった途端動作がおかしくなる。
・ 動作がおかしくなった際エラーを確認したが特に発生した様子はなかった。
・ @media screen and (min-width: 599px) に変更したところ
表示全体が崩れた。

もしかしてヘッダーに
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
と書いていますか？

[mbk08]

> @media (max-width: 1599px)
この状態ではおっしゃる通りの動作になります。

app > views > layouts > application.html.erb　のヘッダーには
<meta name="viewport" content="width=device-width, initial-scale=1.0">
と記述しています。

[kuma_kuma_]

すみません一度
<meta name="viewport" content="width=device-width, initial-scale=1.0">
をコメント化して
@media screen and (min-width: 599px)
をもう一度試してもらえますか？

[mbk08]

<meta name="viewport" content="width=device-width, initial-scale=1.0">
こちらをコメントアウトしても動作は変わりませんでした。