在 Rails 应用程序中单击 link_to 标记后如何使用 JS 刷新浏览器

Posted 2023-02-22

【中文标题】在 Rails 应用程序中单击 link_to 标记后如何使用 JS 刷新浏览器

【英文标题】：How to refresh the browser with JS after clicking a link_to tag in a Rails app

【发布时间】：2017-03-16 16:44:11

【问题描述】：

在用户单击更新数据库的操作的链接后，我正在尝试刷新浏览器。

我想避免使用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 元素的任何部分，页面将重新加载。但是，当我单击链接时，应用程序将转到相关的控制器#action，但页面不会重新加载。

我假设我缺少一种首先执行链接操作然后强制刷新的方法。因此，单击应用程序会记录投票，然后 JS 强制重新加载。你能看到我能做到这一点的任何方法吗？谢谢。

更新

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

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

    );
</script>

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

【参考方案1】：

在您的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

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

【讨论】：

谢谢斯拉万。我尝试实施您的解决方案，但在调用帖子控制器（上面有投票控制器）时出现以下错误：ActionController::UnknownFormat。你知道这是怎么回事吗？

<h5 class='my-link'><%= link_to 'vote', vote_path', method: :post, remote: true %></h5>

@Andrew，您是否尝试过更改上述行？

Great Sravan 现在可以使用了。谢谢！不确定它是如何工作的，但我想我必须搜索一下远程功能和 response_to。如果你还有一分钟的空闲时间。我也有一个评论表格，我想在发表评论后保留这个职位。我在 cmets#create 尝试了相同的方法，但在 button_tag 中添加 remote: true 并不能消除 ActionController::UnknownFormat 错误。为什么会这样？

当然，我要去吃午饭，几分钟后回来。 :)

【参考方案2】：

$('.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>

【讨论】：

谢谢，尽管这会使页面在单击 div 后重新加载，但这不是上面描述的 link_to 标记问题。