单击后退按钮时加载微调器和消息显示

单击页面上的链接时，页面上会显示微调器和消息。它可以工作，并且在新页面加载时适当消失。单击后退按钮时加载微调器和消息显示

我利用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

单击后退按钮时加载微调器和消息显示

回答

相关问题