【问题标题】:Where should I put my page related javascript code in Rails 3.2 using jQuery?我应该在哪里使用 jQuery 将与页面相关的 javascript 代码放在 Rails 3.2 中?
【发布时间】:2016-03-24 13:27:34
【问题描述】:

我正在使用 JQuery 和 Highcharts。

这是我的 app/assets/javascripts/ 文件夹的内容:

application.js
graphique_repartition_budgetaire.js.erb
proj_charge.js.erb

这是我的 app/assets/javascripts/application.js 文件

// This is a manifest file ... bla bla bla ...
//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require highcharts

这是我的 app/assets/javascripts/graphique_repartition_budgetaire.js.erb 文件

$(function () {
    Highcharts.setOptions({
        lang: {
            thousandsSep: "'"
        }
    });
    $('#graphique-repartition-budgetaire').highcharts({
      // my graphic code is here....
    });
});

直到那里它工作正常。 当我尝试为其他特定页面编写其他 javascript/JQuery 代码时,问题就出现了。我将此新代码放入文件 app/assets/javascripts/proj_charge.js.erb :

$(function () {
  alert('JQuery is ready !');
});

这个文件没有执行,似乎也没有加载。 为什么 ? 我应该把我所有的 jQuery 代码放到同一个文件中吗? 我是 Javascript 和 JQuery 的初学者,所以我不知道是否禁止声明两次相同的 $(function () {});

我做错了什么?

=== 编辑 ===

我在 applicationjs 文件的末尾包含了代码:

// This is a manifest file ... bla bla bla ...
//
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require highchart
$(function () {
  alert('JQuery is ready !');
});

然后我停止了我的网络服务器,编译了资产,然后重新启动了网络服务器:

/etc/init.d/apache2 stop
rake assets:precompile
/etc/init.d/apache2 start

什么都没有发生,代码仍然没有出现在firebug的源页面中。

【问题讨论】:

  • 声明 $(function () {});两次不会破坏您的代码,因为它只是检查 DOM 是否已准备好,因此无需执行多次。我认为它没有加载的事实是与 Rails 相关的一个单独问题。

标签: javascript jquery ruby-on-rails


【解决方案1】:

我终于解决了这个问题。

问题来自我使用 Highcharts 和资产管道的开发环境。 事实上,我对 Highchart 的 javascript 图形调用存在于 app/assets/javascripts/graphique_repartition_budgetaire.js.erb 中,并且也存在于我的预编译资产中(由我的 rake assets:precompile 命令构建)。

这导致error in Highchart library

这个错误阻止了我在 proj_charge.js.erb 中的 javascript 代码被执行。 这就是它没有显示警报消息的原因。

我在以下帖子中解释了在开发模式下解决此资产预编译问题的解决方案: Why is Highchart loaded twice in my rails app ? (Uncaught Highcharts error #16)

【讨论】:

    猜你喜欢
    • 2014-06-07
    • 2011-12-07
    • 2020-04-17
    • 1970-01-01
    • 2019-08-20
    • 2023-03-17
    • 1970-01-01
    • 2012-01-17
    • 1970-01-01
    相关资源
    最近更新 更多