标签: turbolinks

让 jQuery 与 Turbolinks 一起工作

我有一个 Rails 4 应用程序,它使用Turbolinks. 我的理解是,这Turbolinks会破坏 jQuery 代码,因为 Turbolinks 不会加载新页面,而只会获取新元素。

因此,导航到新页面可能不会触发.ready,尽管它总是触发.page:load,因此新的 jQuery 代码不会初始化。

我有很多 jQuery 代码,所以我不想修改我的 jQuery 代码以与 Turbolinks 兼容。

是否可以向我的 application.js 添加一段 javascript 代码来覆盖.ready要包含的事件page:load?我该怎么做呢?

ruby-on-rails turbolinks

5
推荐指数
1
解决办法
6377
查看次数

如何触发事件以将 google tagmanager 与 Turbolinks 结合使用

我正在尝试使用 Rails 应用程序实现 google tagmanager,但由于 Turbolinks,我无法触发其标签。

我看到了这个答案:Firing Tags in GTM (Google Tag Manager)container under Turbolinks 和这个:Googletagmanager with Turbolinks 这告诉我,我需要在页面上触发一个事件:加载,但我似乎无法触发该事件。我试过把

$( window ).on( 'page:load', function () {
  dataLayer.push({'event': 'event_name'});
} );
Run Code Online (Sandbox Code Playgroud)

在 application.js 文件中,以及将其放入视图中,我还尝试通过 Coffeescript 在 CoffeeScript 分析文件中使用以下变体:

ready = ->
    dataLayer.push({'event': 'event_name'});
$(document).ready(ready)
$(document).on('page:load', ready)
Run Code Online (Sandbox Code Playgroud)

但当我由于涡轮链接而移动到另一个页面时,我仍然无法让谷歌标签管理器触发其标签。

任何帮助将非常感激。

javascript ruby-on-rails turbolinks google-tag-manager

5
推荐指数
1
解决办法
1603
查看次数

Twitter 小部件并不总是加载

我在网页上有一个像这样的基本 Twitter 小部件:

<div class="twitter mobile-hide">
<a class="twitter-timeline" href="https://twitter.com/TheStickyNoteEd" data-widget-id="722809724224151554">Tweets by @TheStickyNoteEd</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
Run Code Online (Sandbox Code Playgroud)

有时,小部件会消失,只留下 Twitter 的链接。我只是在我的硬盘上本地运行网页。它似乎与域限制无关,因为我也在这里部署了它: http: //beta.thestickynote.com/并且问题仍然发生。

该网站可能会要求您提供用户名/密码,只需使用此通用访客登录即可。

用户:beta 通行证:thestickynote

什么可能导致这个问题?

html javascript turbolinks

5
推荐指数
2
解决办法
4906
查看次数

在自定义 AJAX 请求上显示 Turbolinks 加载栏

我正在使用 Turbolinks 5,顶部有一个很好的加载栏,显示 turbolinks 激活的链接。

可以手动/以编程方式触发此栏的显示/进度以进行自定义 AJAX 调用(甚至可能是任何 AJAX 调用?)

我专门针对 POST/GET 请求提交远程表单 (AJAX)。我知道 turboforms,我有时也会使用它,但在某些情况下,我希望来自服务器的更聪明的 JS 响应,它只生成/重新加载页面的一部分,我仍然想使用 Turbolinks 的 AJAX 反馈。

javascript ajax jquery turbolinks ruby-on-rails-5

5
推荐指数
1
解决办法
632
查看次数

在 Rails 应用程序中切换布局时 Turbolinks 浏览器的后退按钮问题

我在 Rails 应用程序中使用 Turbolinks 5,并且在单击从主 application.html.haml 布局切换到另一个布局的链接后,浏览器的后退按钮出现问题。在我的主布局中,我有这个

= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload'
Run Code Online (Sandbox Code Playgroud)

切换到新的布局作品;但是,当我单击浏览器后退按钮返回时,地址栏中的网址会正确更改,但页面内容保持不变。

向后导航的链接工作正常,但我想让浏览器后退/前进按钮按预期工作,以防止用户感到困惑。

有人遇到同样的问题吗?有什么解决办法吗?谢谢!:)

ruby-on-rails turbolinks

5
推荐指数
1
解决办法
2162
查看次数

单击链接时Rails 5空白页

我正在尝试在我的网站上安装来自 Comodo 的 TrustLogo……所以,我在该<head>部分中有这个:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script type="text/javascript"> //<![CDATA[ 
      var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");
      document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
      //]]>
</script>
Run Code Online (Sandbox Code Playgroud)

问题在于,当我访问页面http://localhost:3000 时,主页加载正常;

但是如果我尝试点击任何链接,页面不会加载;

按 F5 或重新加载按钮,它加载正常

所以我尝试这样做:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'https://secure.comodo.com/trustlogo/javascript/trustlogo.js', 'data-turbolinks-track': 'reload' %>
Run Code Online (Sandbox Code Playgroud)

但这会导致同样的问题。

我也尝试更改位置,所以我去application.js添加以下内容:

document.addEventListener("turbolinks:load", function(){
  var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.comodo.com/" : "http://www.trustlogo.com/");
  document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
});
Run Code Online (Sandbox Code Playgroud)

但这给了我以下 …

javascript ruby-on-rails turbolinks ruby-on-rails-5

5
推荐指数
1
解决办法
792
查看次数

未定义的方法“获取?” 302:整数

我想将Rails应用程序中的ruby版本从升级2.4.22.5.0

在使用Turbolink的地方,所有规格/测试均失败。涡轮链接和红宝石是否存在已知问题2.5.0

这是终端上的输出。

Failure/Error: expect(request).to redirect_to company_salesmen_path(salesman.company)

NoMethodError:
    undefined method `get?' for 302:Integer
  # /Users/dennish/.rvm/gems/ruby-2.5.0/gems/turbolinks-5.1.0/lib/turbolinks/assertions.rb:37:in `turbolinks_request?'
  # /Users/dennish/.rvm/gems/ruby-2.5.0/gems/turbolinks-5.1.0/lib/turbolinks/assertions.rb:6:in `assert_redirected_to'
  # ./spec/requests/salesmen_spec.rb:206:in `block (3 levels) in <top (required)>'
Run Code Online (Sandbox Code Playgroud)

这是规格:

describe 'DELETE /salesman/:id' do
  subject(:request) do
    delete salesman_path(salesman), headers: auth_headers
  end

  let!(:salesman) { create :salesman }

  it 'destroys salesman' do
    expect { request }.to change { Salesman.count }.by(-1)
  end

  it 'redirects to index' do
    expect(request).to redirect_to company_salesmen_path(salesman.company)
  end
end
Run Code Online (Sandbox Code Playgroud)

ruby rspec ruby-on-rails turbolinks ruby-2.5

5
推荐指数
1
解决办法
229
查看次数

DOMContentLoaded 和 turbolinks:load 不会在第一页加载的动态加载脚本上触发(加载没有 turbolinks)

'turbolinks:load' 不会在直接加载的页面上触发,但是,在加载了 turbolinks 的页面上,'turbolinks:load' 事件工作正常。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://rawgit.com/turbolinks/turbolinks/master/dist/turbolinks.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>
        test
    </title>
    <script>
      function loadScript(src) {
        if(!document.querySelector("script[src='"+src+"']")){
          var n = document.createElement("script");
          n.src = src;
          n.async = false;
          document.getElementsByTagName("head")[0].appendChild(n);
        };
      };
    </script>
  </head>
  <body>
    <p style='color:red'>
      Hi Priority Rendering With inline css to improve start render
    </p>
    <script type="text/javascript">
      loadScript("dynamic_load_turbolinks_script.js");
    </script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

dynamic_load_turbolinks_script.js 的代码

console.log('This file will contain all functionally required script');
document.addEventListener("turbolinks:load", function() {
  console.log('Inside turbolinkss Load')
});
window.onload = function(){
  console.log('Inside window onload') …
Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails dynamic-script-loading domcontentloaded turbolinks

5
推荐指数
0
解决办法
917
查看次数

如何在 Rails 6 中禁用 TurboLinks?

所以我面临这个问题,我的服务器确实从客户端的请求中检索了正确的数据,将这些数据发送到浏览器,在那里我可以清楚地看到它可用于浏览器(CTRL + SHIFT + C > 网络 > my_request)。但是,浏览器不会刷新。所以我现在看到的是上一页的数据。搜索了一下之后,我确定它是由 TurboLinks 引起的,然后我尝试禁用这里这里。然而浏览器仍然不会刷新并显示新获取的数据。我做的最后一件事是grep -r turbolink *在我的项目目录中,它给了我以下内容:

app/views/layouts/_dashboard_menu_certified.html.erb:          <%= submit_tag("Apply", {'data-turbolinks': false}) %>
log/development.log:    21:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
node_modules/@rails/webpacker/README.md:<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
node_modules/@rails/webpacker/README.md:<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/README.md:<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/README.md:<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/README.md:<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/README.md:<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/CHANGELOG.md:<%= stylesheet_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
node_modules/@rails/webpacker/CHANGELOG.md:<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
node_modules/@rails/webpacker/CHANGELOG.md:<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/CHANGELOG.md:<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/CHANGELOG.md:<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
node_modules/@rails/webpacker/CHANGELOG.md:<script …
Run Code Online (Sandbox Code Playgroud)

javascript ruby-on-rails turbolinks disable

5
推荐指数
1
解决办法
3689
查看次数

Laravel Mix 和 Turbolinks

我在 turbolinks 设置方面遇到了一些问题。这是设置:Laravel Mix - 默认值:bootstrap,jquery,..)。就在 bootstrap.js 文件之后,我包含了 turbolinks。一切正常,直到页面重新加载 - 我总是出错。我究竟做错了什么?

错误:

app.js:1282 Uncaught TypeError: $ is not a function
    at HTMLDocument.<anonymous> (app.js:1282)
    at Object.push../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (vendor.js:105933)
    at r.notifyApplicationAfterPageLoad (vendor.js:105934)
    at r.visitCompleted (vendor.js:105934)
    at r.complete (vendor.js:105933)
    at r.<anonymous> (vendor.js:105933)
    at vendor.js:105933
Run Code Online (Sandbox Code Playgroud)

有错误的行:

document.addEventListener('turbolinks:load',function() {
    new SimpleBar(document.getElementsByClassName("js-simplebar")[0]);
    $(".sidebar-toggle").on("click", function() {
        //...
    });
});
Run Code Online (Sandbox Code Playgroud)

编辑这里是 js 包括(编译 - Laravel Mix)

<head>
<script defer src="/js/manifest.js" data-turbolinks-track="true"></script>
<scrip`enter code here`t defer src="/js/vendor.js" data-turbolinks-track="true"></script>
<script defer src="/js/app.js" data-turbolinks-track="true"></script>
</head>
Run Code Online (Sandbox Code Playgroud)

这是我的 app.js:

require('./bootstrap');
let Turbolinks = require('turbolinks'); …
Run Code Online (Sandbox Code Playgroud)

javascript jquery turbolinks bootstrap-4 laravel-mix

5
推荐指数
1
解决办法
1205
查看次数