Rafraîchir les vues en les redirigeant tout en conservant l'emplacement du défilement dans Rails

Question

Je suis en train de créer une application semblable à Instagram dans les rails. Vous pouvez soumettre un post, voter sur les messages (via act_as_votable) et commenter les posts des autres.

Mon problème survient lorsque l'utilisateur vote ou ajoute un commentaire à un message. Je voudrais que ces changements soient reflétés dans les vues instantanément avec quelque chose de simple (c'est-à-dire sans utiliser Ajax).

Actuellement, je suis reflétant les changements à l'aide redirect_to forçant un reload

#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 

Bien que cela fonctionne, la barre de défilement saute vers le haut de la page après chaque reload ce qui en fait un cauchemar pour l'utilisateur de faire défiler redescendre à la position qu'il était chaque fois qu'il vote ou ajouter un commentaire.

J'ai essayé beaucoup de choses à ce jour pour essayer de préserver la position de défilement après reload sans succès, parmi ceux-ci:

1) Après avoir remarqué que le rechargement du navigateur conserve l'emplacement de défilement, j'ai essayé de mettre en œuvre un solution JS simple en ajoutant un écouteur d'événement click qui recharge la page avec le code ci-dessous.

$(document).ready(function() { 
    $('.class_of_link_tag').click(function() { 
     window.location.reload(true); 
    }); 
}); 

Cela permet de maintenir la position de défilement si elle est appliquée à une div, mais pour une raison quelconque quand il y a une étiquette de link_to impliqué le clic est pas écouté et que la page ne soit pas rechargées.

2) J'ai essayé d'implémenter 'Scroll Sneak' (http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/). D'une manière très étrange, cela a fonctionné au début et à un moment donné a cessé de fonctionner. Il a été impossible de déterminer pourquoi. J'ai essentiellement inclus la source JS (http://mrcoles.com/media/js/scroll-sneak.js) dans application.js et ajouté ce script au bas du corps.

(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; 
     } 
    })(); 

'-icon vote' est la classe de la div contenant le lien vers le 'messages # 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> 

J'arrive à un point de désespoir ici! Pourriez-vous me donner des conseils sur la façon de résoudre ce problème? Est-il possible d'utiliser window.location.reload dans un lien pour invoquer l'action du contrôleur et recharger le navigateur via JS par la suite? Comment pourrais-je aborder ce problème pour obtenir le meilleur UX sans utiliser Ajax?

Merci

Answer 1

AJAX est pas aussi effrayant que cela puisse paraître. La seule façon de le faire sans utiliser AJAX, tout en mettant à jour les votes en temps réel pour les autres utilisateurs serait de faire de chacun des points de repère de votre page (images, dans le cas) un tag d'ancrage unique, que vous peut ensuite inclure dans l'URL de redirection.

par exemple si votre/page est configuré comme

img1

img2

img3

img4

et supposons que chaque image prend une hauteur de la fenêtre entière, donc vous ne pouvez en voir qu'un seul à la fois.Lorsque je clique pour voter sur img3, si elle est enveloppée dans une balise d'ancrage

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

Alors si vous me rediriger vers/page/# img3, la vue render à défiler vers le bas img3.