如何在访问时重新加载页面答案

【问题标题】：How to make a page reload when it is visited如何在访问时重新加载页面
【发布时间】：2016-06-12 23:04:19
【问题描述】：

我有一个 Rails 应用程序https://hr4d.herokuapp.com 问题是当我访问一个新页面时，该页面无法正确加载，这使我的 JQuery 无效。您可以访问该站点，并了解我的意思。这是我的 JQuery：

$('document').ready(function() {

    $('.dropdown-services').hide(000);

    $('#caret').click(function() {

        if($('.dropdown-services').is(":visible")) {
            $('.dropdown-services').slideUp(300);
        }
        else {
            $('.dropdown-services').slideDown(300);
        }
    });

});

这是我的导航栏代码：

<div class="navbar">

    <div class="box first">
      <a href="/pages/home" class="link-disabled">HR4D</a>
    </div>

    <div class="box second">
      <span class="tagline">Define, Develop, Deliver, and Differentiate</span>
      <br>

      <a class="link" href="/pages/home">
        Home
      </a>

      <a class="left link" id="services" href="/pages/services">
        Services
      </a>
      <div class="caret" id="caret"></div>

      <a class="left link" href="/pages/contact">
        Contact Us
      </a>

      <a class="left link" href="/pages/about">
        About
      </a>

    </div>

</div>

不确定如何解决此问题。任何帮助表示赞赏。

【问题讨论】：

标签： jquery html ruby-on-rails

【解决方案1】：

这个问题主要是由 Turbolinks 引起的。我经常解决它的一种方法是完全禁用 Turbolink 或对代码的特定部分禁用它。要全局禁用，您可以在 app/assets/javascripts/application.js 中删除需要 turbolinks 的行。

【讨论】：

【解决方案2】：

真正的问题不在于重新加载，而是首先解决了使您的页面无法正常加载的问题。

您应该从app/assets/javascripts/application.js 文件中删除以下行：

//= require turbolinks

这很有可能解决问题。但是，您可能更愿意在您的应用程序中继续使用 TurboLinks。如果是这样，您必须处理页面动态更新时触发的不同 TurboLinks 事件。这些事件是“page:load”和“page:restore”，应该以与jQuery(document).ready 回调相同的方式处理。您可以使用以下公式来做到这一点。

在您的 HTML 中，包含一个从您当前的 Javascript ready 处理程序加载代码的脚本：

<body>
  <!-- important body stuff -->
  <script>
  jQuery(document).ready(onThisPageReady);
  jQuery(document).on('page:load', onThisPageReady);
  jQuery(document).on('page:restore', onThisPageReady);
  </script>
</body>

onThisPageReady 函数属于您正在构建的页面的 Javascript 源代码，如果它适用于所有页面，则属于 app/assets/javascripts/application.js。只需将其包含在适当的 Javascript 资产文件中即可：

function onThisPageReady() {
    $('.dropdown-services').hide(000);

    $('#caret').click(function() {
        if($('.dropdown-services').is(":visible")) {
            $('.dropdown-services').slideUp(300);
        }
        else {
            $('.dropdown-services').slideDown(300);
        }
    });
});

完成此操作后，您就可以使用 TurboLinks 进行动态初始化了。 TurboLinks Events 的完整列表可在 TurboLinks Classic github project 上找到。如果您当前正在构建 Rails 5 应用程序，TurboLinks 的版本是新的，并且有一组完全不同的事件要注册，您可以在TurboLinks 5 Full List of Events 中找到。

【讨论】：