我正在使用Rails 4.0开发一个应用程序,我遇到的问题是turbolinks与我的一些jQuery代码不兼容.我有一个Quote模型,它有一个相关的QuoteItems模型.我使用accepts_nested_attributes_for和一些jQuery来填充订单项表单.
当我点击链接将我带到new_quote_path时,动态链接不会触发javascript代码.当我刷新页面时,表单工作很棒.我喜欢turbolinks,因为它超级快,但不知道如何让它在开发中工作.这是一些代码.
在quotes.js.coffee中
jQuery ->
$('form').on 'click', '.remove_line_items', (event) ->
$(this).prev('input[type=hidden]').val('1')
$(this).closest('fieldset').hide()
event.preventDefault()
$('form').on 'click', '.add_fields', (event) ->
time = new Date().getTime()
regexp = new RegExp($(this).data('id'), 'g')
$(this).before($(this).data('fields').replace(regexp, time))
event.preventDefault()
报价查看new.html.erb
<%= form_for @quote, :class => "hello" do |f| %>
<fieldset>
<p>
<%= f.label :quote_date, "Date of Quote" %> <br/>
<%= f.text_field :quote_date %>
</p>
<p>
<%= f.label :good_through %> <br/>
<%= f.text_field :good_through %>
</p>
<p>
<%= f.label :quote_number %><br/>
<%= f.text_field :quote_number %>
</p>
<p>
<%= f.label …我的rails应用程序中有一个模板,通过单击我主页中的链接,第一次加载时不会执行javascript代码.只有在第一次从链接访问它时才会发生这种情况.我不知道为什么会这样.有帮助吗？这是代码.
主页:
#app/views/static_pages/home.html.erb
#...
<%= link_to "Nofify an absence", new_cancellation_path %>
这是Javascript文件:
//app/assets/javascripts/cancellations_new.js
var validateDateTime = function(){
// some other code that returns true or false
}
$(document).ready(function(){
$("#new_cancellation").submit(function(event){
event.preventDefault();
if (validateDateTime()) {
alert("Some alert");
}
else {
// some more code
}
});
});
以及应该执行javascript的模板:
#app/views/cancellations/new.erb
<%= provide(:title, "Notify an absence")%>
<div class="row">
<div class="span3 offset4">
<h3> Notify an absence </h3>
<%= form_for @cancellation, :id => "new_cancellation" do |f| %>
<%= render 'shared/error_messages' %>
<% # some form elements...%> …起初,所有javascript都运行良好.
但是,从我导航到另一个页面的那一刻起,任何事件都会被多次触发.如果我刷新页面,一切都恢复正常.
在jquery.turbolink文档中,有一个关于在$(function())块中绑定文档事件的警报.但是,默认情况下,coffescript似乎就像这样.所以我该怎么做？
这是我的环境:
的Gemfile:
gem 'turbolinks'
gem 'jquery-turbolinks'
的application.js
//= require jquery
//= require jquery.turbolinks
//..app js
//= require turbolinks
application.html.erb
<html>
<head>
<meta charset="utf-8">
<title><%= t 'brand' %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= yield :head %>
<%= csrf_meta_tags %>
<meta name="description" content="<%= yield :page_description %>">
<meta name="keywords" content="<%= yield :page_keywords %>">
</head>
controller.js.coffee
$(document).ready ->
$(document).on 'click', '.addition .label i', (e) …在Rails中使用turbolink,如果请求花费很长时间,无论是否预期,浏览器都没有通常的提示来表明发生了任何事情.
我的页面上有一个搜索表单,启用Turbolinks是安全的,因为它使用method ="get"
是否有任何简单的方法可以在Turbolinks的控制下提交表单(即避免页面刷新)
这个问题可能听起来类似于Rails turbolinks长请求不显示页面加载.
我最近开始使用新的Rails 4应用程序,它默认使用Turbolinks库 - 它很棒:让应用程序感觉更快/更快,但是我确实有一些页面比其他页面慢.
不幸的是,我找不到一个让浏览器显示默认加载指示器的好方法- 就像加载"常规"网页时一样.人们推荐不同的JavaScript解决方案,例如https://github.com/caarlos0/turbolinks_transitions.虽然有些看起来不错,但"平均互联网用户"并不习惯在默认浏览器的加载指示器以外的地方看到加载进度.
我的大多数页面都很快,所以我想为不会在300毫秒内加载的页面显示此加载指示器.
谢谢!亚历克斯.
我正在使用Rails 4.
我正在尝试使用此脚本来显示谷歌地图.我有一个不同地方的页面,每个地方都有一个地址.它显示在谷歌地图中.
所以我正在使用分页,在每个页面上我有4个位置.gmap的4个脚本.
但是这个脚本仅在页面重新加载(ctrl + R或F5)时初始化,这是因为turbolinks.
我怎样才能让它以最简单的方式工作？
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(<%= place.latitude %>, <%= place.longitude %>);
var mapOptions = {
zoom: 16,
center: myLatlng
};
var map = new google.maps.Map(
document.getElementById("map-canvas-<%= place.id %>"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '<%= place.title %>'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
那是剧本.每个地图的div看起来像这样:
<div id="map-canvas-<%= place.id %>"></div>
我有一个具有从属选择的活动面板,即第一个下拉选择中的选项会影响第二个下拉列表中显示的内容.
几个月前一切都运转良好,但我刚刚意识到它已经不再适用了.
我设法找到导致错误的原因:如果我删除了急切加载("包含"),那么它再次起作用.
不工作:(当前版本):
@deal_subsectors = DealSector.find(params[:deal_sector_id],
include: :deal_subsectors).dealsubsectors
我收到此错误(表单chrome dev tools的控制台)
GET http://localhost:3000/admin/deals/deal_subsectors_by_deal_sector?deal_sector_id=2 404 (Not Found)
send @ jquery.js?body=1:9660
jQuery.extend.ajax @ jquery.js?body=1:9211
jQuery.(anonymous function) @ jquery.js?body=1:9357
jQuery.extend.getJSON @ jquery.js?body=1:9340
update_deal_subsector @ active_admin.js?body=1:19
(anonymous function) @ active_admin.js?body=1:12
jQuery.event.dispatch @ jquery.js?body=1:4666
elemData.handle @ jquery.js?body=1:4334
ListPicker._handleMouseUp @ about:blank:632
工作,当我删除"包含"/急切加载时:
@deal_subsectors = DealSector.find(params[:deal_sector_id]).deal_subsectors
在这种情况下它完美无缺.
但我真的很想加载交易子部门,所以我想知道是什么导致了这个错误,自工作以来发生了什么变化.我有一些假设,但找不到罪魁祸首.
Rails 4改变了我应该使用find的方式(params [:id] ..)或者我应该使用eager loading的方式
做主动管理员改变它处理预先加载的方式:也许它只适用于索引,而不适用于编辑页面......
现在Rails 4上的turbolinks改变了我必须加载的方式吗？
这是代码:
- 在Active Admin上
ActiveAdmin.register Deal do
# controller for the multi-select sector/subsector in the form
# does 2 …javascript ruby-on-rails activeadmin turbolinks ruby-on-rails-4
我正在使用turbolinks 5 beta 1,对于某些特定页面,我想加载外部javascript文件.
在我的示例中,我有一个联系人页面,我想通过加载谷歌地图api来显示地图.访问根页面时不应加载它,但稍后在单击指向联系人页面的链接后将其包含在内.
产生一个javascript脚本标签工作在Turbolinks 2.但似乎不再工作了.
有可能检查javascript是否已经加载,否则在需要时异步加载它.
像这样的东西:
loadScript = (src, callback) ->
script = document.createElement("script")
script.type = "text/javascript"
script.onload = callback if callback
document.getElementsByTagName("head")[0].appendChild(script)
script.src = src
initialize = ->
# init map here
load = ->
if $('#gmap').size > 0
if typeof(google) == 'function'
initialize()
else
loadScript 'https://maps.googleapis.com/maps/api/js?&callback=initialize'
$(document).on 'turbolinks:load', -> load()
这是解决这个问题的唯一方法还是有更简单的方法？
我想仅在用户第一次登录时触发一些JS,并且只在第一次加载特定页面时触发.
我相信我可以通过简单的检查来处理他们第一次登录user.sign_in_count < 2,但我不知道如何仅在第一页加载时指定.
即我不希望在用户首次登录后触发JS并刷新页面而不注销.
我正在使用Turbolinks并$(document).on('turbolinks:load', function() {触发它.
编辑1
所以我要做的是在许多页面上执行Bootstrap Tour.但我只希望在第一页加载时自动执行该游览.游览本身将引导用户访问我的应用程序中的其他特定页面,但每个页面将在每个页面上具有特定于页面的游览JS.
现在,在我的HTML中我有这样的事情:
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
onStart: function(){
$('body').addClass('is-touring');
},
onEnd: function(){
$('body').removeClass('is-touring');
},
steps: [
{
element: "#navbar-logo",
title: "Go Home",
content: "All throughout the app, you can click our logo to get back to the main page."
},
{
element: "input#top-search",
title: "Search",
content: "Here you can search for players by their …