只在Rails 4应用程序中的页面刷新时加载JQuery

vis*_*shB 78 jquery twitter-bootstrap ruby-on-rails-4

我创建了一个Rails 4应用程序,并为图像弹出效果添加了fancybox库.它工作正常,但只有在页面刷新时.如果用户不刷新页面,则jquery根本不起作用.我尝试用小jquery方法测试它,但所有工作只在页面刷新后才能工作.我也在使用twitter bootstrap.

我的assets/application.js文件:

//= require jquery
//= require jquery_ujs
//= require fancybox
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .


$(document).ready(function() {
  $(".fancybox").fancybox();
    $("#hand").click(function(){
     if($("#check6").is(':visible'))
     {
      $("#check6").hide();
      }
     else
     {
      $("#check6").show();
      }
    });
});
Run Code Online (Sandbox Code Playgroud)

Ian*_*Ian 180

好的,我认为我理解你的问题足以提供答案.关于使用turbolinks的事情是,大多数绑定到文档就绪事件的插件和库都停止工作,因为turbolink会阻止浏览器重新加载页面.有一些技巧可以解决这些问题,但最简单的解决方法是使用jquery.turbolinks.

要使用它,只需将其添加到您的Gemfile:

gem 'jquery-turbolinks'
Run Code Online (Sandbox Code Playgroud)

这到你的assets/javascripts/application.js文件:

//= require jquery.turbolinks
Run Code Online (Sandbox Code Playgroud)

你应该好好去.

仅供参考:您不需要使用turbolinks,但它很有用,它可以避免整页刷新,从而加快请求速度.Turbolinks通过AJAX获取您单击的链接的内容并将其呈现在同一页面上,从而消除了重新加载资源(JS和CSS)的开销.尝试使您的页面使用它.使用前一段中的库我没有真正的问题.您在页面上拥有的CSS和JS越多,使用turbolinks所获得的改进就越大.

  • 这个答案结束了漫长的任务......非常感谢伊恩 (13认同)
  • 好吧,它很有用,但重要的是要注意`// = require jquery.turbolinks`需要****// = require jquery`后才能工作https://github.com/kossnocorp/jquery.turbolinks (4认同)

Cod*_*rus 17

伊恩得到了一个很好的答案,这个是一个附加的类型(在写作时我不会让任何人评论.)

来自https://github.com/rails/turbolinks/#jqueryturbolinks:

Add the gem [gem 'jquery-turbolinks'] to your project, then add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:

//= require jquery.turbolinks
Run Code Online (Sandbox Code Playgroud)

在我没有require jquery.turbolinks在列表中的正确位置添加之前,所以它有点挑剔.然后我添加了一种新的方式,我希望它更好.

  • +1的额外信息,我的链接仍然无法工作,直到我读到你的答案. (2认同)

Kar*_*ren 8

在我遵循CodeWalrus和Ian的答案之前,我无法让事情奏效,但对我来说还有更多.如jquery.turbolinks自述文件所述,订单必须非常具体.

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
Run Code Online (Sandbox Code Playgroud)

此外,如此处所述,如果您已将应用程序javascript链接放在页脚中以达到速度优化的原因,就像我一样,您需要将其移动到<head>标记中,以便在<body>标记中的内容之前加载它.


小智 5

Turbolinks是这里的问题.在轨道中添加了Tururbinks以改善网页的性能.我已经有了这个解决方案

<%= link_to "Create New Form", sampleform_path, 'data-no-turbolink' => true %>

更多细节参考这个