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

62o28rlo  于 2023-10-17  发布在  Ruby
关注(0)|答案(3)|浏览(110)

当我的页面上的链接被点击时,页面上会出现一个微调器和一条消息。它工作,当新页面加载时,它们会适当地消失。
我使用spin.js found here来实现加载微调器。
不过,我发现了一个bug。当用户单击浏览器上的后退按钮时,它会返回到上一页,但处于显示微调器和错误消息的状态。我当然想回到消息被隐藏的状态,微调器不显示。
根据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');
        });
    }());
});
7eumitmz

7eumitmz1#

问题的发生是因为$(document).ready函数在你返回时没有被调用。你需要更新你的JavaScript来适应Turbolinks。
不要使用$(document).ready,而是尝试使用适当的页面事件,例如page:load。可用选项列在Turbolinks docs
您最终的JavaScript将与$(document).on("page:fetch", default_hide_waiting_message)类似

hmae6n7t

hmae6n7t2#

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

xxslljrj3#

让我解释一下Ketan的回答。当用户登陆页面,从一个页面导航到另一个页面,刷新冻结的页面或通过浏览器的后退和前进按钮导航时,触发发送到窗口的“pageshow”事件。可以将此事件和函数绑定到此事件处理程序。在下面的例子中,“#waiting_message”在用户每次导航时消失。

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

然而,我建议使用“pagehide”而不是“pageshow”,因为这个问题清楚地提到了浏览器的后退按钮。“页面隐藏”事件仅在用户通过浏览器的导航按钮导航时发送到窗口。

onpagehide = (event) {
    $("#waiting_message").hide();
};

相关问题