单击 Rails 应用中的 link_to 标签后如何使用 JS 刷新浏览器

Question

我正在尝试在用户单击 link 以执行更新数据库的操作后刷新浏览器。

我想避免使用 redirect_back 以防止在重新加载后被发送回屏幕顶部，所以我在 link_to 标签中添加了一个 JS 点击监听器，代码如下:

# in my view
<h5 class='my-link'><%= link_to 'vote', vote_path' %></h5> 

# at the bottom of my application layout
<script>
  $('.my-link').click(function (event) {
    window.location.reload(true);
  });
</script>

JS 代码侦听器工作正常，如果我单击 h5 元素的任何部分，页面将重新加载。但是，当我单击 link 时，应用程序将转到相关的 controller#action 但页面不会重新加载。

我假设我缺少一种先执行 link 操作然后强制刷新的方法。所以在点击应用程序记录投票然后 JS 强制重新加载。你能看到我有什么办法可以做到这一点吗？谢谢

更新

我通过向 JS 事件添加一个计时器来解决这个问题，这样它就可以让 link 有时间到达控制器并执行操作并在它之后重新加载。

<script>
  $(document).ready(function() {
    $('.puke-icon, .clean-link, .comment-send').click(function() {
        setTimeout(function(){
                   window.location.reload(true); },
             50);
          });

    });
</script>

这可能太hacky了，所以希望你能提供更优雅的方法谢谢！

Answer 1

$('.product').click(function () {
 location.reload();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row" id="footerRow">

         <div class="col-xs-12 product">
            <h2>Product</h2>
         <div>
         
    </div>
</div>

Answer 2

在你的 vote controller action 中，在 respond_to do format 中使用 location.reload()。

respond_to do |format|
    format.js {render inline: "location.reload();" }
end

查看：

<h5 class='my-link'><%= link_to 'vote', vote_path' %></h5>

控制器：

class VotesController < ApplicationController

  def vote
    ----------------------  

    // your code goes here

    ----------------------  

    respond_to do |format|
    format.js {render inline: "location.reload();" }
    end

  end

end

这将在数据库操作完成后重新加载页面。

单击 Rails 应用中的 link_to 标签后如何使用 JS 刷新浏览器

How to refresh the browser with JS after clicking a link_to tag in a Rails app

javascript

jquery

ruby-on-rails

reload

link-to