CODEWITHSUNDEEP
jqueryhtmlruby-on-rails
Sam Henrichs
Sam Henrichs

Reputation: 67

How to make a page reload when it is visited

I have a rails app https://hr4d.herokuapp.com the problem is that when I visit a new page, the page doesn't load properly, which makes my JQuery ineffective. You can visit the site, and see what I mean. Here is my 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);
        }
    });

});

Here is my navbar's code:

<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>

Not sure how to fix this problem. Any help is appreciated.

Upvotes: 1

Views: 63

Answers (2)

Michael Gaskill
Michael Gaskill

Reputation: 8042

The real problem is not in reloading, it's fixing the issue that keeps your page from loading properly in the first place.

You should remove the following line from your app/assets/javascripts/application.js file:

//= require turbolinks

That's very likely to fix the issue. However, you may prefer to continue using TurboLinks in your application. If so, you have to handle the distinct TurboLinks events that are fired when the page is dynamically updated. These events are "page:load" and "page:restore", and should be handled in the same way as your jQuery(document).ready callback. You can use the following formula to do that.

In your HTML, include a script that loads the code from your current Javascript ready handler:

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

The onThisPageReady function belongs in the Javascript source for the page that you're building, or in app/assets/javascripts/application.js if it applies to all pages. Simply include this in the appropriate Javascript asset file:

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

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

Once you've done that, you've made your dynamic initialization work with TurboLinks. The complete list of TurboLinks Events is found here on the TurboLinks Classic github project. If you're currently building a Rails 5 app, the version of TurboLinks is new, and has a totally different set of events to register, which you can find in the TurboLinks 5 Full List of Events.

Upvotes: 0

oreoluwa
oreoluwa

Reputation: 5623

The problem is largely caused by Turbolinks. One way I've often worked around it, is to disable Turbolink entirely or disable it for specific portions of your code. To disable globally, in your app/assets/javascripts/application.js you could remove the line that requires the turbolinks.

Upvotes: 1

Related Questions