2016-11-02 12 views
0

私は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を得るために、この問題にどのようにアプローチできますか?

ありがとうございました

答えて

0

AJAXはそれほど恐ろしいものではありません。

AJAXを使用せずに他のユーザーの投票をリアルタイムで更新するには、ページ上のランドマーク(画像)をユニークなアンカータグにすることが唯一の方法ですリダイレクトURLに含めることができます。例えば

あなた/ページが

IMG1

IMG2

IMG3

IMG4

ように設定してのは、各画像が全体のビューポートの高さを占めると仮定しましょうされている場合、一度に1つしか見ることができません。私はあなたが/ページ/#のIMG3に私をリダイレクトする場合は、それが

<a href='#img3'> <img src='image.gif'> </a>

そして、アンカータグに包まれていた場合、IMG3に投票する]をクリックすると、ビューがIMG3にスクロールダウンレンダリングされます。

関連する問題