Making offline.js work with turbolinks

Question

I am using offline.js with turbolinks and on initial page load it works fine. But if I click another links then this wont work until I refresh the page. I can see the Offline.state is down but still the view is not showing. Is there any way to manually trigger the popup window?

Update

Other than the offline.js file the only js I have is this

var
    $online = $('.online'),
    $offline = $('.offline');

Offline.on('confirmed-down', function () {
    $online.fadeOut(function () {
        $offline.fadeIn();
    });
});

Offline.on('confirmed-up', function () {
    $offline.fadeOut(function () {
        $online.fadeIn();
    });
});

no not using document.ready()..I cant find find an option to trigger that manually either..The updated question have the code I use (loads after main script file) — Abhilash, Mar 06 '17 at 04:15
Well I'm guessing you're having a turbolinks issue. I'll post an answer..one sec — Mark, Mar 06 '17 at 04:17

score 1 · Accepted Answer · answered Dec 12 '19 at 01:31

This is an old question, but I ran into the same problem, maybe it can help someone. offline.js creating these dom elements on page load inside the body HTML

<div class="offline-ui offline-ui-up">
   <div class="offline-ui-content"></div>
   <a href="" class="offline-ui-retry"></a>
</div>

The reason why offline.js not working after page change is that on-page change the body HTML replaced with the new content returned by the server and the code above removed. This is how Turbolinks works, so page load will be not triggered and the offline.js dom elements will be not created. One solution will be to warp the offline.js inside a function and call it on every page change, but it will cause eventually memory leak (as "offline" and "online" event listener will be added to 'window' on each change)

Other solution will be to save the 'offline-ui' HTML before the new page loaded and bring it back after load:

# will fire before page change and save offline.js UI
document.addEventListener("turbolinks:before-render", function() {
    if (!document.offlineHtml) { 
        document.offlineHtml = $('.offline-ui'); 
    }
});

# will fire afterload and will check if there is a UI to append to the body
document.addEventListener("turbolinks:load", function() {
    if (document.offlineHtml) {
        $(document.body).append(document.offlineHtml);
    }
});

At the moment this is the best way that I could find to fix that.

score 0 · Answer 2 · answered Mar 06 '17 at 04:18

0

This could be a turbolinks issue. In app/assets/javascripts/application.js, wrap your javascript code within:

$(document).on('turbolinks:load', function() {
  // your code
});

answered Mar 06 '17 at 04:18

Mark

9,718
6
29
47

Making offline.js work with turbolinks

2 Answers2