单击我页面上的链接时,页面上会出现一个微调器和一条消息。它有效,并且在加载新页面时它们会相应地消失。
我利用spin.js found here来实现加载微调器。
我发现了一个错误。当用户单击其浏览器上的后退按钮时,它将返回上一页,但处于显示微调器和错误消息的状态。我当然希望回到隐藏消息并且微调器没有显示的状态。
根据this post,听起来这个问题可能与缓存有关。
我正在使用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');
});
}());
});
答案 0 :(得分:1)
问题正在发生,因为当你回击时$(document).ready
函数没有被调用。您需要更新自己的javascript以适应Turbolinks。
不要使用$(document).ready
尝试使用适当的页面事件,例如page:load
。可用选项列在Turbolinks docs
您的最终javascript会有类似于$(document).on("page:fetch", default_hide_waiting_message)
答案 1 :(得分:0)
$(window).bind("pageshow", function(event) {
$("#waiting_message").hide();});