我有一个 Rails 4 应用程序,它使用Turbolinks. 我的理解是,这Turbolinks会破坏 jQuery 代码,因为 Turbolinks 不会加载新页面,而只会获取新元素。
因此,导航到新页面可能不会触发.ready,尽管它总是触发.page:load,因此新的 jQuery 代码不会初始化。
我有很多 jQuery 代码,所以我不想修改我的 jQuery 代码以与 Turbolinks 兼容。
是否可以向我的 application.js 添加一段 javascript 代码来覆盖.ready要包含的事件page:load?我该怎么做呢?
我正在尝试使用 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)
但当我由于涡轮链接而移动到另一个页面时,我仍然无法让谷歌标签管理器触发其标签。
任何帮助将非常感激。
我在网页上有一个像这样的基本 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
什么可能导致这个问题?
我正在使用 Turbolinks 5,顶部有一个很好的加载栏,显示 turbolinks 激活的链接。
可以手动/以编程方式触发此栏的显示/进度以进行自定义 AJAX 调用(甚至可能是任何 AJAX 调用?)
我专门针对 POST/GET 请求提交远程表单 (AJAX)。我知道 turboforms,我有时也会使用它,但在某些情况下,我希望来自服务器的更聪明的 JS 响应,它只生成/重新加载页面的一部分,我仍然想使用 Turbolinks 的 AJAX 反馈。
我在 Rails 应用程序中使用 Turbolinks 5,并且在单击从主 application.html.haml 布局切换到另一个布局的链接后,浏览器的后退按钮出现问题。在我的主布局中,我有这个
= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload'
Run Code Online (Sandbox Code Playgroud)
切换到新的布局作品;但是,当我单击浏览器后退按钮返回时,地址栏中的网址会正确更改,但页面内容保持不变。
向后导航的链接工作正常,但我想让浏览器后退/前进按钮按预期工作,以防止用户感到困惑。
有人遇到同样的问题吗?有什么解决办法吗?谢谢!:)
我正在尝试在我的网站上安装来自 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)
但这给了我以下 …
我想将Rails应用程序中的ruby版本从升级2.4.2到2.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) '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
所以我面临这个问题,我的服务器确实从客户端的请求中检索了正确的数据,将这些数据发送到浏览器,在那里我可以清楚地看到它可用于浏览器(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) 我在 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) turbolinks ×10
javascript ×7
jquery ×2
ajax ×1
bootstrap-4 ×1
disable ×1
html ×1
laravel-mix ×1
rspec ×1
ruby ×1
ruby-2.5 ×1