Rails Project: jQuery Plugin not loading until refresh

Question

I building an app in Rails 4. I have the below JS plugins on my show page but they seem to work only when I manually reload the page.

I read that this might be due to turbolinks but since these plugins are in the body and not the head, it doesn't seem like a turbolinks issue.

I even tried pasting these in the head and the footer tags but these gave me the same issue. Sometimes, one of the plugins loads and the other doesn't.

The first plugin below are AddThis social buttons and the other is an image gallery.

Any suggestions?

Demo page http://mktdemo.herokuapp.com/listings/45

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ashfaaq">
</script>

    <script>

        jQuery(document).ready(function($) {
      $('#gallery-1').royalSlider({
        fullscreen: {
          enabled: true,
          nativeFS: true
        },
        controlNavigation: 'none',
        autoScaleSlider: true, 
        autoScaleSliderWidth: 960,     
        autoScaleSliderHeight: 850,
        imageScaleMode: 'fit-if-smaller',
        navigateByClick: true,
        numImagesToPreload:2,
        arrowsNav:true,
        arrowsNavAutoHide: true,
        /* arrowsNavHideOnTouch: true, */
        keyboardNavEnabled: true,
        fadeinLoadedSlide: true,
        globalCaption: false,
        globalCaptionInside: false,
        loop: true,
        thumbs: {
          appendSpan: true,
          firstMargin: true,
          paddingBottom: 4
        } 
      });
    });

    </script>

score 1 · Answer 1 · answered Aug 26 '14 at 22:12

Sounds like turbolinks is the cause of your problems.

You can either install this gem: Jquery Turbolinks

Or you could replace

jQuery(document).ready(function(
     ....
));

with

$(document).on('page:load', function(
    ....
));

Here is a nice copy/paste of why turbolinks causes some problems with jquery.

TurboLinks is a PJAX like library that asynchronously requests the content of the next page and inserts it into the current page’s body instead of requiring a full page reload. It speeds up page load times nicely. However, because the page is reloaded, the DOMContentLoaded event is triggered and your jQuery document.ready event wont be triggered.

Source

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You can find the answer to your question here: Rails 4 turbo-link prevents jQuery scripts from working

Rails 4 is using Turbolinks, which load the page javascript and css only once and then replaces only the body and title in the header. This is why jQuery(document).ready will only work if you reload the page.

In order to trigger your javascript, you have to use Turbolinks events like

page:change the page has been parsed and changed to the new version and on DOMContentLoaded

or

page:load is fired at the end of the loading process.

More details here: https://github.com/rails/turbolinks/#events

Here you can just replace your

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

By

$(document).on('page:load', function($) { 
...

dafaso · Answer 3 · 2018-02-03T17:58:56.390

I had the same issue with my jQuery image gallery on Rails 5. It would not load unless the page was refreshed. After a year of (on and off) trying, here's the hack that worked for me:

Wrap your jQuery gallery code in a function:

var delayLoad = function(){
 $('#gallery-1').royalSlider({
 ...
 })
}

Then call it with setTimeout:

setTimeout(delayLoad, 250)

This solved the issue for me every time without having to refresh the page.

Rails Project: jQuery Plugin not loading until refresh

3 Answers3