Javascript没有在rails 4中运行答案

【问题标题】：Javascript not running in rails 4Javascript没有在rails 4中运行
【发布时间】：2016-07-31 22:53:16
【问题描述】：

Rails n008 在这里。

试图让 JS 在 rails 4 项目中工作。让 Turbolinks 运行。当页面加载时，没有 javascript 运行。我有什么遗漏吗？

谢谢！

application.html.erb

<head>
  <title>Closet</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>

应用程序.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

welcome.js

var ready;
ready = function(){
$(document).on('page:load', function(){
  console.log('page loaded')
  $(".main-button").on('click', function(e){
    e.preventDefault();
    $.ajax ({
      url: "/users/new",
      method: "GET",
      data: { },
      dataType: "html"
    }).done(responseData){
      $(".newuser").html(responseData);
     }.fail({
       console.log('Something bad happened. Not sure what.')
    });
  });
};

$(document).ready(ready);
$(document).on('page:load', ready);

感谢您的帮助！

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-4

【解决方案1】：

我建议使用gem 'jquery-turbolinks'，如果您使用的是turbolinks 5，您可能需要下载compatibility.coffee here 并将其放在assets/javascripts/ 下

在application.js 中包含//= require jquery.turbolinks

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

【讨论】：

你加入了//= require jquery.turbolinks 吗？
是的，所有这些都做到了。不幸的是，什么都没有。甚至我的 console.log 也没有。在 Rails 中，我使用的每个 .js 文件是否都需要一个 $(document).ready(ready);和 $(document).on('page:load', ready);?
检查您的$.ajax function 喜欢.done(responseData) 吗？应该是.done(function(data){....})
并将所有内容放在$(document).ready(function(){ $(".main-button")..... }) 下应该可以工作。

【解决方案2】：

您的页面加载回调包含在您的 ready 函数中，并且永远不会被调用。

看看这是否有效......

var main = function(){
  console.log('main() loaded');

  $('#main-button').on('click', function(e){
    e.preventDefault();

    $.ajax("/users/new").done(function(responseData) {
      $("#new-user").html(responseData);
    }).fail(function() {
      console.log('Something bad happened. Not sure what.')
    });
  });
};

$(document).on('turbolinks:load', function() {
  console.log("page loaded")
  main();
});

我做了一些整理
您实际上并不需要“jquery-tubolinks”gem。
使用id="main-button" 代替类和“newuser”，现在是“new-user”。 ID 用于页面上的独特事物，例如该按钮和您要定位的区域。

【讨论】：

不幸的是，仍然无法正常工作。我会继续努力解决这个问题！
“不工作”是什么意思？你得到输出了吗？如果是这样，它是什么？你把这段代码放在哪里了？

【解决方案3】：

已解决！我花了一些时间，但是

最后发生的事情是我注意到welcome.js 文件根本没有加载到DOM 中。看到这个后，我认为这是一个资产管道问题。

此外，我还有一个“welcome.js”和一个“welcome.coffee”。所以我所做的就是删除了welcome.coffee（因为我还不知道coffeescript并且没有使用它）。猜测如果welcome.coffee 以某种方式被编译成常规JS 可能会出现某种错误-> 那么我在技术上会有2 个welcome.js

在那之后，我在阅读 on this stackoverflow question 时对资产管道的其他一些问题进行了讨论。

瞧，现在welcome.js 加载到DOM 中了，我可以开始处理它了。

感谢大家的帮助

【讨论】：