Rails 4应用程序..在开发环境中，除非刷新页面，否则javascript不会启动

Rails 4 app... in development environment javascript not firing unless page is refreshed

本文关键字：否则 javascript 启动 刷新 应用程序 开发 环境 Rails      更新时间：2023-09-26

所以我的第一个rails4应用程序遇到了一个奇怪的问题，除非我重新加载页面，否则我的页面javascript不会启动。

这对于我的资产管道JS和content_for JS都是正确的。

在我的/assets/javascripts/cars.js文件中：

$(function(){
    $("#car_car_make_id").on("change", function(){
        //SET MODELS
        $.ajax({
            url: "/car_makes/" + $(this).val() + "/car_models",
            type: "GET",
            dataType: "json",
            cache: false
        })
        .done(function(data) { model_list(data) })
        .fail(function() { alert("error"); })
    });
});
function model_list(data) {
    $("#car_car_model_id").empty();
    $.each(data, function(i,v){ 
        $("<option />").val(v.id).text(v.name).appendTo("#car_car_model_id");
    });
    //ON COMPLETE SHOW
    $("#car_model_div").show();
}

使用content_for:在页面中内联

<% content_for :head do %>
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('yt_vid', {
            height: '390',
            width: '640',
            videoId: '<%= @timeslip.youtube_id %>'
        });
    }
</script>
<% end %>

只有当我刷新页面时，这两个才会启动。

例如，如果我点击youtube视频页面的链接，它将不会加载。但如果我刷新它就会。与资产管道脚本相同，只有当我首先重新加载页面时，它才会发出ajax调用。

看起来像是Turbolinks新功能的副作用。当您单击链接时，页面不会被重新加载——它只是通过AJAX请求加载了<body>。因此：

在第一种情况下，$(function{ ... })没有运行，因为document.ready只在第一页加载时触发，而不是重新加载正文。

在第二种情况下，<head>没有重新装载涡轮连杆，只有机身。所以你只剩下旧的<script>，它不会重新运行！

检查涡轮链接的一些选项，如jquery.tubrolinks.

在Rails4中遇到了同样的问题，并用rmosolgo的解决方案解决了这个问题。

首先添加jquery涡轮链接gem

gem 'jquery-turbolinks'

然后

bundle install

添加到application.js（正如我在https://github.com/kossnocorp/jquery.turbolinks)

//= require jquery
//= require jquery.turbolinks
.
.
.
//= require turbolinks

效果非常好！！谢谢

目前最简单的解决方案是使用jquery-turbolinks-gem。只需将其添加到您的Gemfile中，运行bundle install，然后在jquery需求之后立即将//= require jquery.turbolinks添加到application.js文件中。

顺便说一句，最好将涡轮连杆的需求转移到堆栈的底部。

这是一个变通方法，而不是真正的解决方案：使用target='_blank'作为指向该页面的url，js将被正确加载和激发，而不需要额外的gem。

这也是我的问题：

我使用了一种不同的方法在头中添加页面特定的js，如下所示
<%= javascript_include_tag "js_for_a" if
controller_name == "c" && action_name == "a" %>
在js_for_a.js中，我有这样的东西：
$(function(){...})

当从不包含"js_for_a"的页面请求页面时，将不会加载此js文件。

在我安装了gem"jquery-turblinks"并在正确的位置添加//= require jquery.turbolinks之后，js将不会加载。但如果之前被浏览器缓存，它就会被解雇。

有人有解决方案吗？

相关文章：