單擊後退按鈕時加載微調器和消息顯示

單擊頁面上的鏈接時，頁面上會顯示微調器和消息。它可以工作，並且在新頁面加載時適當消失。單擊後退按鈕時加載微調器和消息顯示

我利用spin.js found here來實現加載微調器。

雖然我發現了一個錯誤。當用戶點擊瀏覽器上的後退按鈕時，它會回到上一頁，但處於顯示微調器和錯誤消息的狀態。我當然想回到郵件被隱藏的狀態，並且微調不顯示。

根據this post，這聽起來像問題可能與緩存有關。

我使用jquery-turbolinks寶石

下面是我的代碼：

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

來源

2015-07-21 Neil

的問題發生，因爲當你打回$(document).ready功能是沒有得到調用。您需要更新您的JavaScript以適應Turbolinks。

而不是使用$(document).ready嘗試使用適當的頁面事件，如page:load。可用的選項在Turbolinks docs

你最終的JavaScript上市將有類似的東西$(document).on("page:fetch", default_hide_waiting_message)

來源

2015-07-21 18:47:49

我想，既然我已經包括了'jQuery的turbolinks'創業板，'$（文件）。就緒'會爲我工作。我嘗試用'$（document）.on（「page：fetch」''替換那個，正如你所建議的，但不幸的是它仍然不適用於我。 – Neil

你能否嘗試將調試消息記錄到控制檯，以便隔離在渦輪鏈接設置與自定義代碼？ –

我認爲我的回答很好，直到我再次嘗試。我會繼續努力。我認爲你是正確的：這是一個渦輪鏈接問題 – Neil

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

來源

2016-11-14 05:05:50

幾行關於如何回答問題的解釋將是一件好事。 – Carpetsmoker

單擊後退按鈕時加載微調器和消息顯示

回答

相關問題