Question

我正在尝试在没有Ajax的情况下在不同页面之间创建加载指示符。我有一个包含gif的.spin-wrapper类的div。因此我需要在加载页面时隐藏它，并在单击链接时显示。加载新页面时，它应该再次隐藏（等等）。

但是当我重新加载页面时它只运行一次。它加载并隐藏我的div，然后在我点击链接后显示它（控制台消息出现）。但后来它不起作用。我在任何其他页面上看到我的div，我的控制台消息也没有出现。

的application.js：

function toggleSpin() {
    $('.spin-wrapper').toggle()
    console.log('clicked');
}

$(document).ready(function () {
    $('.tooltip_cell').tooltip({container: 'body'})

    $('.spin-wrapper').hide()
    $('a').on('click',toggleSpin);
    console.log('loaded');

});

如何解决？

Answer 1

我有一个包含gif的.spin-wrapper类的div。因此我需要在加载页面时隐藏它，并在单击链接时显示。加载新页面时，它应该再次隐藏（等等）。

单击链接后不久将不再存在div，因此当您到达新页面时它将再次隐藏，因为它默认为隐藏。相反，将其默认为可见，然后在窗口加载时隐藏它。

$(window).on("load",function(){
    $(".spin-wrapper").fadeOut();
});

如果您愿意，也可以在点击链接后立即显示。

$('a').on('click',function(){
    $(".spin-wrapper").fadeIn();
});

然后点击显示它可能会导致它不是很平滑，因为微调器会消失，然后再显示。

Answer 2

如果你使用的是rails 4和Turbolink，那么你的问题就是你的javascript代码只加载了一次。尝试禁用Turbolink（在asset / application.js中）并测试您的代码。如果它有效且你想继续使用Turbolink，我推荐这个https://github.com/kossnocorp/jquery.turbolinks 检查一下！ https://github.com/rails/turbolinks/ http://railscasts.com/episodes/390-turbolinks

Answer 3

铁路使用涡轮链接，所以我们应该使用

$( document ).on('turbolinks:click', function() {
  $('#your_spinner_div').removeClass('hide-div');
});

哪里

.hide-div{
  display: none;
}

还添加

    $( document ).on('turbolinks:before-cache', function() {
  $('#your_spinner_div').addClass('hide-div');
});

因此，当您单击浏览器后，您将看不到微调器。

发布此答案是因为我尝试在上述答案中添加摘要，但没有用。希望这对将来对Rails陌生的人有所帮助。

Rails 4.在没有Ajax的页面之间加载指标

3 个答案: