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 patability
    (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');
        });
    }());
});

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 patability
    (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');
        });
    }());
});

• javascript
• jquery
• ruby-on-rails
• ruby

Share Improve this question Follow edited May 23, 2017 at 12:13 CommunityBot 111 silver badge asked Jul 21, 2015 at 16:11 NeilNeil 5,1981414 gold badges8686 silver badges165165 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

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 remend 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();
};