私はInstagramのようなアプリをレールに構築しています。投稿を投稿したり、投稿に投票したり(act_as_votable経由)たり、他人の投稿にコメントすることができます。Railsでスクロール位置を保持しながらリダイレクトでビューを更新する
私の問題は、ユーザーが投稿に投票したりコメントを追加したりするときに発生します。私はその変更をただちに(つまりAjaxを使わずに)ビューに即座に反映させたいと思います。現在、私は、これは動作しますが、それぞれが、ユーザーがスクロールするための悪夢なってリロードした後、スクロールバーがページの一番上にジャンプ
#as an example here an upvote action in my posts controller
def upvote
@post.vote_by voter: current_user, duplicate: true
flash[:info] = "Your vote has been recorded"
redirect_to posts_path
end
リロードを強制するredirect_to使用して変更を反映してい
彼が票を投じたりコメントを追加するたびに彼の位置に戻った。
私はそれらの中で、成功せず、リロード後のスクロール位置を維持しようとするこれまでに多くのことを試してみた:私は、ブラウザのリロードがスクロール位置を保持していることに気づいた後、私が実装しようとした)
1シンプルなJSソリューションでは、以下のコードでページをリロードするクリックイベントリスナーを追加します。
$(document).ready(function() {
$('.class_of_link_tag').click(function() {
window.location.reload(true);
});
});
任意のdiv要素ではなくのlink_toタグをクリックが聞いていないと、ページがリロードされませんが関わっています何らかの理由で適用される場合、これはスクロール位置を維持しています。
2)「スクロールスニーク」(http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/)を実装しようとしました。非常に奇妙なやり方では、最初はうまくいき、ある時点では動作しなくなりました。理由を特定することは不可能でした。私は基本的にJSソース(http://mrcoles.com/media/js/scroll-sneak.js)をapplication.jsに含め、本文の末尾にこのスクリプトを追加しました。
(function() {
var sneaky = new ScrollSneak(location.hostname), posts = document.getElementsByClassName('vote-icon'), i = 0, len = posts.length;
for (; i < len; i++) {
posts[i].onclick = sneaky.sneak;
}
})();
「投票-アイコン」私はここに絶望のポイントになりそうだ「ポスト#1 upvote」
<!--a portion of the posts index.html.erb -->
<div class="vote-icon">
<%= link_to vote_path(post_id: post.id), method: :put do %>
<%= image_tag("vote.png", :height => 45) %>
<% end %>
</div>
へのリンクを含むdiv要素のクラスです!私はこれをどのように解決できるかについて私にいくつかの指針を教えてください。リンクでwindow.location.reloadを使用することができますので、コントローラのアクションを呼び出し、その後JSを介してブラウザをリロードしますか? Ajaxを使用せずに最高のUXを得るために、この問題にどのようにアプローチできますか?
ありがとうございました