我有一个表单,它有大量的Javascript(特别是jquery)。当我通过手动输入url导航到页面时,或者当我从登录页面重定向到它时,所有javascript元素的加载都很好。但是,当我从索引中的链接导航到页面时,除非刷新,否则不会加载任何javascript。(我不知道这是否是索引独有的问题;索引恰好包含到表单的唯一链接)。
我已经将我所有的JavaScript合并到init.js
,我在application.js
中有require
d。如下所示:
jQuery(document).ready(function($) {
// scolling accelleration
$(".anchor_link").click(function(event) {
event.preventDefault();
$('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
} );
$('#save').click(function(){
$('#save_alert').animate({"bottom":"100px"}, "slow").delay(800).animate({"bottom":"50px"}, "slow");
});
//styling radio buttons
function radStyle(entity){
$(entity).find('input[type="radio"]').css("display", "none");
$(entity).find('input[type="radio"]').parent().prepend('<span class="radiospan fa-stack">')
$(entity).find("span.radiospan").append('<i class="fa fa-circle fa-stack-2x fa-inverse">')
$(entity).find('input[type="radio"]:checked').siblings("span.radiospan").append('<i class="fa fa-circle fa-stack-1x">');
}
//calling radio buttons on document ready
radStyle(document);
//adding interactive radio button functionality (delegate to provide functionality to dynamically generated fields)
$('div.form-right').delegate('input[type="radio"]', 'click', function(){
if($(this).is(':checked')){
$(this).siblings("span.radiospan").append('<i class="fa fa-circle fa-stack-1x">');
$(this).closest('span.radio').siblings('span.radio').find('i.fa.fa-circle.fa-stack-1x').remove();
}
});
//select menus on initial load
$('select').customSelect();
//styling select menus and radio buttons upon dynamic content generation
var nests = [ "dynamic-officer", "dynamic-director", "dynamic-contractor-person", "dynamic-contractor-org", "dynamic-ip", "dynamic-shareholder"];
nests.forEach(function(nest){
$("#"+nest).on("cocoon:after-insert", function(e, added_item){
added_item.find('select').customSelect();
radStyle(added_item);
});
});
} );
还有几张钞票
- 更让我困惑的是,firebug似乎承认了我的init.js的存在,并且没有在错误控制台中抛出任何东西
- 我注意到,如果我将
init.js
中的所有内容复制到视图中的嵌入式<script>
部分中,它的加载就很好
无论如何,完全有可能这就是rails的工作方式,我需要在我的视图中使用脚本标记(我以为我读到过它不是,但谁知道呢)。关于这个问题的任何建议都将受到赞赏;提前感谢任何让我明白这一点的人。
如果它与错误有关,我的index.html.erb
是
<div class="container-fluid">
<h1>Incorporation#index</h1>
<table class="table table-hover">
<% @incorporations.each do |incorporation| %>
<tr>
<td class="name">
<% begin %>
<%= link_to incorporation.company.names.first.name_string, edit_incorporation_path(incorporation) %>
<% rescue %>
<%= link_to "Untitled Company", edit_incorporation_path(incorporation) %>
<% end %>
</td>
<td class="email"><%= link_to incorporation.user.email, incorporation %></td>
<td class="created_at"><%= link_to incorporation.created_at, edit_incorporation_path(incorporation) %></td>
<td class="generate"><%= button_to "Generate Documents", incorpgenerate_incorporation_path(incorporation), :remote => true, :method => :post %></td>
</tr>
<% end %>
</table>
</div>
我认为是涡轮链接。
阅读以下内容:Jquery Turbolinks Gem
这似乎是一个与Turbolink gem有关的问题。默认情况下,这个gem与Rails4一起提供,众所周知,它会导致诸如"(document).ready(function($)"之类的javascript调用出现大量问题。原因是Turbolink gem在页面之间导航时避免了完全加载所有应用程序资产(JS和CSS)。