はじめまして、プログラミングを初めて3ヶ月の初学者です。
Ratyを利用した星評価を実装中に
ブラウザバックで星評価のある画面に戻ると
星5個が星10個になるという不具合にぶつかりました。
いくら検索しても解決せず、最終的にメンターと試行錯誤して解決したので
今日は同じ目に逢ってる方と、いつかの自分の為に記録します。
ちなみに初めて書くのでお手柔らかに…
#目次
- 開発環境
- 不具合
- 何故なるのか?
- 結論 ←ココが解決策
- 解説
- 試した方法
#開発環境
- Cloud9
- ruby '2.6.3'
- Rails 5.2.4.5
- jquery
#不具合
本来5つ星での評価をしたいのに、
ブラウザバックで評価の存在するページに戻ると
星の数が倍になる
#何故なるのか?
不具合時のコードを見ると記載がこうなります。
<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つを読み込むことになるとか…
順序で見てみると
- 星5つが読み込まれたページを表示
- ページ移行
- ブラウザバック
- 星5つが読み込まれたページ に 再度星5つ読み込む(合計10個になる)
となるのだとか…
つまり星10個の時点で他のベー時に移行し、再度ブラウザバックすると星が15個になってしまうわけです。
#結論
ページを表示する際に、一度真っさらにしてしまえばいい。
先ほどのコードに1文追加するだけです。
<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つを表示すらされませんでした。
周りでも数人同じことで困っていたので、結構よくあるのだと思います。
この記事が役に立ちます様に。