戻るボタンをクリックしたときに表示されるスピナーとメッセージの読み込み

概要

マイページ上のリンクをクリックすると、ページ上にスピナーとメッセージが表示されます。それは機能し、新しいページが読み込まれると適切に消えます。

ここにあるspin.jsを利用してローディングスピナーを実装しました。

バグを見つけましたが。ユーザーがブラウザの戻るボタンをクリックすると前のページに戻りますが、スピナーとエラーメッセージが表示された状態になります。もちろん、メッセージが非表示になり、スピナーが表示されない状態に戻したいです。

この投稿によると、問題はキャッシュに関係しているようです。

jquery-turbolinks gemを使用しています

以下は私のコードです:

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

解決策

この問題は、打ち返したときに .ready 関数が呼び出されないために発生します。 Turbolinks に対応するには JavaScript を更新する必要があります。

.ready を使用する代わりに、page:load などの適切なページイベントを使用してみてください。利用可能なオプションはターボリンクのドキュメントにリストされています。

最終的な JavaScript は、.on(“page:fetch”,default_hide_waiting_message) のようなものになります。