單擊頁面上的鏈接時,頁面上會顯示微調器和消息。它可以工作,並且在新頁面加載時適當消失。單擊後退按鈕時加載微調器和消息顯示
我利用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');
});
}());
});
我想,既然我已經包括了'jQuery的turbolinks'創業板,'$(文件)。就緒'會爲我工作。我嘗試用'$(document).on(「page:fetch」''替換那個,正如你所建議的,但不幸的是它仍然不適用於我。 – Neil
你能否嘗試將調試消息記錄到控制檯,以便隔離在渦輪鏈接設置與自定義代碼? –
我認爲我的回答很好,直到我再次嘗試。我會繼續努力。我認爲你是正確的:這是一個渦輪鏈接問題 – Neil