16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails jQuery Raty】ブラウザバックすると星が増える不具合

Last updated at Posted at 2021-03-25

はじめまして、プログラミングを初めて3ヶ月の初学者です。
Ratyを利用した星評価を実装中に
ブラウザバックで星評価のある画面に戻ると
星5個が星10個になるという不具合にぶつかりました。

いくら検索しても解決せず、最終的にメンターと試行錯誤して解決したので
今日は同じ目に逢ってる方と、いつかの自分の為に記録します。

ちなみに初めて書くのでお手柔らかに…

#目次

  • 開発環境
  • 不具合
  • 何故なるのか?
  • 結論 ←ココが解決策
  • 解説
  • 試した方法

#開発環境

  • Cloud9
  • ruby '2.6.3'
  • Rails 5.2.4.5
  • jquery

#不具合
本来5つ星での評価をしたいのに、
ブラウザバックで評価の存在するページに戻ると
星の数が倍になる
スクリーンショット 2021-03-25 16.16.20.png

正しい表示はこう
スクリーンショット 2021-03-25 16.16.37.png

#何故なるのか?
不具合時のコードを見ると記載がこうなります。

show.html.erb

<div id="star-rate-<%= @review.id %>"></div>

 <script>
  $('#star-rate-<%= @review.id %>').raty({
    size: 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
    starHalf: '<%= asset_path('star-half.png') %>',
    readOnly: true,
    score: <%= @review.rate %>,
  });
 </script>

これだと、ページを表示する度に星5つを読み込むことになるとか…
順序で見てみると

  1. 星5つが読み込まれたページを表示
  2. ページ移行
  3. ブラウザバック
  4. 星5つが読み込まれたページ に 再度星5つ読み込む(合計10個になる)

となるのだとか…

つまり星10個の時点で他のベー時に移行し、再度ブラウザバックすると星が15個になってしまうわけです。

#結論
ページを表示する際に、一度真っさらにしてしまえばいい。
先ほどのコードに1文追加するだけです

show.html.erb

 <script>
 $('#star-rate-<%= @review.id %>').empty(); #これを追加
  $('#star-rate-<%= @review.id %>').raty({
    size: 36,
    starOff:  '<%= asset_path('star-off.png') %>',

#解説
これについては私もメンターの言葉を鵜呑みにしていたので、調べてみました。
【jQuery】要素を削除する.remove()と.empty()の違い
こちらの記事によると…

empty();
こちらは指定した要素の中にある子要素を削除します。

とのことでした。

メンターの言葉を借りると

星部分を一度削除→再度読み込む。

となるそうです。

#試した方法

ついでなので、調べて試してダメだった方法も載せておきます。

.remove();
これだと親要素(星5つを表示するブロック)ごと削除されてしまうらしく
星5つを表示すらされませんでした。


周りでも数人同じことで困っていたので、結構よくあるのだと思います。
この記事が役に立ちます様に。

16
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?