Loading spinner and message displaying when back button clicked

Question

When links on my page are clicked, a spinner and a message appear on the page. It works, and they disappear appropriately when the new page is loaded in.

I utilized spin.js found here to implement the loading spinner.

I found a bug though. When a user clicks the back button on their browser, it goes back to the previous page, but in the state of displaying the spinner and error message. I want to of course go back to the state where the message is hidden and the spinner is not showing.

According to this post, it sounds like the issue might have to do with cacheing.

I am using the jquery-turbolinks gem

Below is my code:

#app/assets/javascripts/foo.js
$(document).ready(function(){  #for turbolinks compatability
    (function default_hide_waiting_message(){
        $("#waiting_message").hide();
    }());
    (function display_loading_spinner_and_message(){
        $(".show_loading_spinner_on_click").on('click', function(){
                var opts = {
                  lines: 12             // The number of lines to draw
                , length: 7             // The length of each line
                , width: 5              // The line thickness
                , radius: 10            // The radius of the inner circle
                , scale: 1.0            // Scales overall size of the spinner
                , corners: 1            // Roundness (0..1)
                , color: '#000'         // #rgb or #rrggbb
                , opacity: 1/4          // Opacity of the lines
                , rotate: 0             // Rotation offset
                , direction: 1          // 1: clockwise, -1: counterclockwise
                , speed: 1              // Rounds per second
                , trail: 100            // Afterglow percentage
                , fps: 20               // Frames per second when using setTimeout()
                , zIndex: 2e9           // Use a high z-index by default
                , className: 'spinner'  // CSS class to assign to the element
                , top: '50%'            // center vertically
                , left: '50%'           // center horizontally
                , shadow: false         // Whether to render a shadow
                , hwaccel: false        // Whether to use hardware acceleration (might be buggy)
                , position: 'absolute'  // Element positioning
                }
                var target = document.getElementById('spinner')
                var spinner = new Spinner(opts).spin(target)
            $("#waiting_message").fadeIn('slow');
        });
    }());
});

score 2 · Accepted Answer · answered Jul 21 '15 at 18:47

2

The issue is happening because the $(document).ready function isn't getting called when you hit back. You'll need to update your javascript to accommodate Turbolinks.

Instead of using $(document).ready try using the appropriate page event, such as page:load. The available options are listed in the Turbolinks docs

Your final javascript would have something similar to $(document).on("page:fetch", default_hide_waiting_message)

answered Jul 21 '15 at 18:47

Musannif Zahir

3,001
1
21
31

I thought that since I had included the `jquery-turbolinks` gem, the `$(document).ready` would work for me. I tried replacing that with `$(document).on("page:fetch"` as you suggested but unfortunately it still wasn't working for me. – Neil Jul 21 '15 at 19:16
Can you try logging a debug message to the console so that you can isolate something in the turbo links setup vs the custom code? – Musannif Zahir Jul 21 '15 at 19:57
I thought my answer was good until I tried it again. I'll keep working on it. I think you are right though: It is a turbo links issue. – Neil Jul 21 '15 at 20:06

score 2 · Answer 2 · answered Nov 14 '16 at 05:05

2

$(window).bind("pageshow", function(event) {
$("#waiting_message").hide();});

answered Nov 14 '16 at 05:05

Ketan Akbari

10,837
5
31
51

1

A few lines of explanation on how this answers the asked question would be a good thing to add. – Martin Tournoij Nov 14 '16 at 07:55
2

Whilst I agree there's no explanation, this worked fine for me - thanks! – Dave Aug 21 '19 at 13:22
This fixed it for me as well. – Patrick G. Apr 19 '22 at 12:37

esenkaya · Answer 3 · 2023-08-31T17:59:51.040

Let me explain Ketan's answer. When user lands on the page, navigates from one page to another, refreshes frozen page or navigates through browser's back and forward buttons triggers the "pageshow" event sent to window. You can bind this event and your function to this event handler. In this case below, "#waiting_message" disappears each time user navigates.

$(window).bind("pageshow", function(event) {
    $("#waiting_message").hide();
});

However, I would recommend using "pagehide" instead of "pageshow" since the question clearly mentions browser's back button. "pagehide" event sent to window only when user navigates through browser's navigation buttons.

onpagehide = (event) {
    $("#waiting_message").hide();
};

Loading spinner and message displaying when back button clicked

3 Answers3